角6编译失败

Question

示例:t这是app组件的子组件，使用命令行

吴格康

去创造它。任何创建它的东西都会在编译时失败。

import { Component, OnInit } from '@angular/core';

    @Component({
    selector: 'app-emp',
    templateUrl: `
          <h2>EmpList</h2>
          <ul *ngFor="let emp of empArr">
              <li>{{emp.name}} {{emp.id}} {{emp.age}}</li>
          </ul>
          `,
     styleUrls: ['']
    })
    export class EmpComponent implements OnInit {
    public empArr=[
         {"id":1,"name":"jamal","age":25},
         {"id":2,"name":"yasser","age":80},
         {"id":3,"name":"zolla","age":11}
    ];

    constructor() { }

    ngOnInit() {
    }

    }

我收到以下错误消息：

> Module not found: Error: Can't resolve './
>           <h2>EmpList</h2>
>           <ul *ngFor="let emp of empArr">
>               <li>{{emp.name}} {{emp.id}} {{emp.age}}</li>
>           </ul>
>           ' in 'D:\Angular\bind\src\app\emp'
>     ERROR in ./src/app/emp/emp.component.ts
>     Module not found: Error: Can't resolve './' in 'D:\Angular\bind\src\app\emp'

Answer 1

由于您提供了一个内联模板，所以您的组件装饰器中的templateUrl属性应该被称为template。

或者，将模板放在一个单独的文件中，然后您可以通过URL引用它。

Answer 2

您需要对emp.component.ts文件进行更改。

角6以2方式提供模板注入。

1. 使用templateUrl :如果使用templateUrl，代码应该如下所示:-

@Component({ selector：'app-emp'，templateUrl：'./emp.component.html'，styleUrls：'‘})

在这里，您需要提供外部html文件的链接，您可以在其中放置html代码。我已经为这个例子创建了演示。

1. 通过使用模板:如果您只在代码中使用模板，它应该如下所示- @Component({ selector：'app-emp'，模板：<h2>EmpList</h2> <ul *ngFor="let emp of empArr"> <li>{{emp.name}} {{emp.id}} {{emp.age}}</li> </ul>，styleUrls：‘})

请使用模板选择器查看另一个演示。

我认为这将澄清templateUrl和template之间的概念和区别。

Answer 3

你正在向templateUrl提供html ..。

基本上，从angular2到@component构造函数对象，component.html链接的属性很少。

1. templateUrl：这里我们提供了component.html文件的相对路径。
2. template：这里我们提供了组件中使用的html。

因此，您可以使用任何人，并提供相应的输入。