Question

对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
     ....

简单的device.html代码

<div>Include is working!</div>

add-device.component.html

<div ng-include="" src="'templates/device.html'">
    <div>More unique elements here!</div>
</div>

我也试过了

<div ng-include="" src="'templates/device.html'"></div>

<div ng-include="'templates/device.html'"></div>

以下给出错误，无法识别ng-include。

<ng-include src="'templates/device.html'"></ng-include>

目标是使用添加和编辑设备组件的device.html模板代码。我正在使用typescript来管理项目。当我在调试器中查看Sources时，我甚至没有在源列表中看到device.html文件。

Answer 1

Angular没有AngularJS曾经拥有的ng-include。

在Angular中，您可以创建如下组件：

@Component({
    selector: 'app-device',
    templateUrl: './device.html'
})
class DeviceComponent {}

然后，而不是：

<div ng-include="'templates/device.html'">

你这样做：

<app-device></app-device>

Answer 2

更新角度7 +

创建一个实现OnInit的类

将模块添加到app.module.ts

@Component({
selector: 'app-device',
templateUrl: '../views/device.component.html',

})

export class DeviceComponent implements OnInit{


ngOnInit(): void {
}



}

添加视图

<app-device></app-device>

无法在角度5

2 个答案: