angular - 无法在 Angular 5 中使用 ng-include

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>

添加设备.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 来管理项目。当我查看调试器中的源时，我什至没有在源列表中看到 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>