Question

我尝试通过templateUrl在我的组件中加载模板。但它不会起作用。它在控制台中抛出错误：错误TS2304：找不到名称'module'。属性moduleId：module.id已设置。当我尝试在组件内部编写模板时，它工作正常。我使用SystemJS。结构如下：

-app
  |
  |- components
  | |
  | |-projects
  |   |
  |   |-project.component.ts
  |   |-project.component.html
  |
  |-app.component.ts
  |-app.module.ts

project.component.ts

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

@Component({
    selector: 'project',
    moduleId: module.id,
    templateUrl: './project.component.html' 
})

export class ProjectComponent {
    title: string;
    projectName: string;
    projectCity: string;

    constructor () {}

    addProject () {
        console.log('Add project);
    }
}

非常简单的html：

<div>
    <form novalidate (ngSubmit)="addProject(form.value)" #form="ngForm">

        <div class="form-group">
            <label for="">Projectname</label>
            <input type="text" name="projectName" class="form-control" required [(ngModel)]="projectName">    
        </div>

        <div class="form-group">
             <label for="">Ort</label>
             <input type="text" name="projectCity" class="form-control" required [(ngModel)]="projectCity">    
        </div>

        <button type="submit" [disabled]="!form.valid" class="btn btn-default">Project anlegen</button>

     </form>
</div>

app.component.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ProjectComponent } from './components/projects/project.component';
import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [AppComponent, ProjectComponent],
    bootstrap: [AppComponent]
})

export class AppModule {}

Answer 1

你试过templateUrl: './project.component.html'吗？您需要添加.html

Answer 2

尝试使用：

template: require('./project.component.html')

Answer 3

您的代码中的一切正常。

只需更改您的组件代码，如下所示：

From : 

@Component({
 selector: 'project',
 moduleId: module.id,
 templateUrl: './project.component.html' 
})


To : 

@Component({
 selector: 'project',
 moduleId: module.id,
 templateUrl: 'components/projects/project.component.html' 
})

这绝对适合你。

Angular2 templateUrl加载模板不起作用

3 个答案: