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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 05:12:13  来源:igfitidea点击:

Unable to use ng-include in angular 5

angulartypescript

提问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-includeas AngularJS used to have.

Angular 没有以前的ng-includeAngularJS 了。

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+

  1. create a class that implements OnInit

  2. 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>
    
  1. 创建一个实现 OnInit 的类

  2. 在 app.module.ts 中添加模块

    @Component({
    selector: 'app-device',
    templateUrl: '../views/device.component.html',
    
    })
    
    export class DeviceComponent implements OnInit{
    
    
    ngOnInit(): void {
    }
    
    
    
    }
    

    在视图中添加

    <app-device></app-device>