Question

这是我的Angular应用程序，我想将我的HTML模板移动到separeted文件（template.ts）：

import { Component } from '@angular/core';
import {Template} from './template'

export class entity {
    id:number;
    name:string;
    dob:string;
}

let USERS: entity[] = [
    {id: 0, name: 'Jon Smith', dob: '01.10.1990'},
    {id: 1, name: 'asd qwe', dob: '22.04.1988'}
];

let myTemplate: Template;

@Component({
  selector: 'my-app',
  template: myTemplate.code,
})

export class AppComponent {
    name = 'Angular';
    Users = USERS;
}

模板文件：

export class Template {
    code:string =`
            <h1>Список</h1>
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                        </div>
                        <div class="modal-body">
            ...
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
            <table class="table table-hover table-bordered">
                <thead>
                    <tr>
                        <th> id </th>
                        <th> </th>
                        <th> </th>
                        <th> </th>
                        <th> </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th> {{Users[0].id}} </th>
                        <th> {{Users[0].name}} </th>
                        <th> {{Users[0].dob}} </th>
                        <th> <button class="crud__DeleteEditButton form-control" data-toggle = "modal" data-target = "#myModal"> </button> </th>
                        <th> <button class="crud__DeleteEditButton form-control"> </button> </th>
                    </tr>
                    <tr>
                        <th> {{Users[1].id}} </th>
                        <th> {{Users[1].name}} </th>
                        <th> {{Users[1].dob}} </th>
                        <th> <button class="crud__DeleteEditButton form-control"> </button> </th>
                        <th> <button class="crud__DeleteEditButton form-control"> </button> </th>
                    </tr>
                </tbody>
            </table>
    `
}

但我在template = myTemplate.code上一直收到'无法读取未定义的属性'错误怎么了？这是我的AppModule文件：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import { AppComponent }  from './app.component';
import {Template} from "./template";

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, Template ],
  bootstrap:    [ AppComponent ],
  providers:    [Template]
})
export class AppModule { }

Answer 1

更好地使用属性templateUrl并在html文件中提供html模板的路径。

进一步阅读：https://angular.io/docs/ts/latest/guide/style-guide.html#!#components

您收到错误，因为您说该变量是模板的类型，但该变量永远不会被分配。

你也可以这样做：

export class Template {
    public static readonly code: string =`<h1>Список</h1>`
}

并且

@Component({
  selector: 'my-app',
  template: Template.code,
})
// ...

但要注意，我强烈建议使用HTML文件作为模板，如上所述。

Answer 2

您正在导出一个类，该类在实例化时将具有包含您的模板的code类型的属性string。

Angular期望模板是一个字符串，而不是一个类。要解决此问题，只需导出字符串本身

export const template = `<h1>Список</h1>`;

此外，提供者是创建服务的类或函数。 template不是服务，不得提供。

最后，您的组件将如下所示

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

@Component({
  selector: 'my-app',
  template: template
})
export class AppComponent {
  name = 'Angular';
  Users = USERS;
}

为什么导入的变量未定义？

2 个答案: