為什么導入的變量未定義？

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

您正在導出一個類，該類在實例化時將具有包含您的模板的string類型的屬性code 。

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;
}