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

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

模板文件：

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

---

最好使用属性

templateUrl

，并在html文件中提供html模板的路径

进一步阅读：

---

您得到了错误，因为您说该变量是模板的类型，但该变量从未得到分配的内容

您也可以这样做：

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

---

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

您正在导出一个类，该类在实例化时将具有

code

类型

string

的属性，其中包含您的模板

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

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

---

我建议将模板放在单独的HTML文件中，并将templateurl设置为该文件。您的

导出类AppComponent

非常奇怪。不要滥用课堂！我怀疑您正在寻找

export const AppComponent=

仅供参考，

实体

应该是一个

接口

，您正在为自己和未来的维护人员制造一个微妙的陷阱。现在这是滥用类。你到底为什么要把一个简单的常量包装成一个永远不会被调用的函数对象的静态（可变）属性呢？我根本不会，就像我写的那样。但是仍然比调用新对象和实例化新对象更好，只是为了访问静态字符串。虽然您正确地认为使用模板文件是更好的方法，但如果您要使用

ts

/

js

文件，只需使用模块即可。这是JavaScript，该死。只需导出值，不要创建甚至没有使用的浪费性、易出错的抽象。只要学习语言<代码>导出常量x=1

从“/x”导入{x}。为什么要使用类？只是不想为了让示例理解而对其代码进行太多修改。因为他的问题是，为什么他的代码不工作，而不是如何导入模板。如果我们要导出一个变量，我根本不会这样做，首先要使用HTML模板。您将变量设置为一个函数的
静态
可变属性，该函数是无缘无故定义的。这违反了TypeScript和JavaScript编程准则。这也是毫无意义的。了解JavaScript的工作原理。
export class Template {
    public static readonly code: string =`<h1>Список</h1>`
}

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

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

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

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