typescript 无法在角度 5 中使用 ng-include
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/48555286/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unable to use ng-include in angular 5
提问by Sannu
Pretty new to Angular and doing a small pilot project using Angular 5 and Visual Code. I am trying to use ng-include and the template doesn't get displayed.
刚接触 Angular,并使用 Angular 5 和 Visual Code 做了一个小型试点项目。我正在尝试使用 ng-include 并且没有显示模板。
src
add-device
add-device.component.html
add-device.component.scss
add-device.component.spec.ts
add-device.component.ts
edit-device
edit-device.component.html
edit-device.component.scss
edit-device.component.spec.ts
edit-device.component.ts
templates
device.html
app.module.ts
app.coponent.ts
app.component.html
....
simple device.html code
简单的 device.html 代码
<div>Include is working!</div>
add-device.component.html
添加-device.component.html
<div ng-include="" src="'templates/device.html'">
<div>More unique elements here!</div>
</div>
I also tried following
我也试过跟随
<div ng-include="" src="'templates/device.html'"></div>
<div ng-include="'templates/device.html'"></div>
Following gives error, ng-include is not recognized.
以下给出错误,无法识别 ng-include。
<ng-include src="'templates/device.html'"></ng-include>
Objective is to use device.html template code from both add and edit device components. I am using typescript to manage the project. When i look at the Sources in debugger, i do not even see device.html file in source list.
目标是使用来自添加和编辑设备组件的 device.html 模板代码。我正在使用打字稿来管理项目。当我在调试器中查看 Sources 时,我什至在源列表中看不到 device.html 文件。
回答by MondKin
Angular doesn't have a ng-include
as AngularJS used to have.
Angular 没有以前的ng-include
AngularJS 了。
In Angular, you can create a component like this:
在 Angular 中,你可以像这样创建一个组件:
@Component({
selector: 'app-device',
templateUrl: './device.html'
})
class DeviceComponent {}
And then, instead of:
然后,而不是:
<div ng-include="'templates/device.html'">
you do:
你做:
<app-device></app-device>
回答by keithics
update angular 7+
更新角度 7+
create a class that implements OnInit
add the module in app.module.ts
@Component({ selector: 'app-device', templateUrl: '../views/device.component.html', }) export class DeviceComponent implements OnInit{ ngOnInit(): void { } }
add in the view
<app-device></app-device>
创建一个实现 OnInit 的类
在 app.module.ts 中添加模块
@Component({ selector: 'app-device', templateUrl: '../views/device.component.html', }) export class DeviceComponent implements OnInit{ ngOnInit(): void { } }
在视图中添加
<app-device></app-device>