Question

我正在尝试使用角度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 {

}

Answer 1

您必须为styleUrls和templateUrls使用相对于项目根目录的路径（所以app/foo/bar/products/app.component.pen.html代替./products/app.component.pen.html）。

要使用相对于组件文件的URL，您的项目必须是commonjs模块（在tsconfig中设置"module":"commonjs"），并且必须在组件装饰器中包含module.id：< / p>

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

Answer 2

它显示here亲戚路径有效，但我认为那还没有释放您必须使用起始文件夹的完整路径。对于例如如果您的起始文件夹名称为app。你必须给出路径：
templateUrl:app/products/app.component.pen

Angular找不到templateUrl

2 个答案: