Angular找不到templateUrl

发布时间：2020-12-17 07:33:56 所属栏目：安全来源：网络整理

导读：我正在尝试使用角度js 2中的以下代码加载 Html文件. 此文件在产品文件夹下可用,我尝试加载的html文件也在同一文件夹中.它仍然没有用. import {Component} from 'angular2/core';@Component({ templateUrl:'./products/app.component.pen.html'})export class

我正在尝试使用角度js 2中的以下代码加载 Html文件.
此文件在产品文件夹下可用,我尝试加载的html文件也在同一文件夹中.它仍然没有用.

import {Component} from 'angular2/core';

@Component({
    templateUrl:'./products/app.component.pen.html'
})

export class PenComponent
{

}

上面的文件是从下面的AppComponent加载的.

import {Component} from 'angular2/core';
import {RouteConfig,ROUTER_DIRECTIVES} from "angular2/router";
import {PenComponent} from "./products/app.component.pen";
import {BookComponent} from "./products/app.component.book";  

@Component({
    selector: 'my-app',template: `
            <header>
                <ul>
                <li>
                <a [routerLink]="['Pen']">Pen</a></li>

                <li>
                <a [routerLink]="['Book']">Book</a></li>
                </ul>

            </header>
        <router-outlet></router-outlet>
    `,directives: [ROUTER_DIRECTIVES]

})

@RouteConfig([
    {path: '/pen',name: 'Pen',component: PenComponent,useAsDefault:true}
    {path: '/book',name: 'Book',component: BookComponent}


])


export class AppComponent {

}

您必须为styleUrls和templateUrls使用相对于项目根目录的路径(所以app / foo / bar / products / app.component.pen.html而不是./products/app.component.pen.html).

要使用相对于组件文件的URL,您的项目必须是commonjs模块(在tsconfig中设置“module”：“commonjs”),并且必须在组件装饰器中包含module.id：

@Component({ 
  selector: 'foo',moduleId: module.id // <== need this
  templateUrl: './foo.html'
})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!