如何使用模板进行 Angular2 工作

我正在尝试将模板与 Angular2 一起使用，但它没有按预期工作。这是我到目前为止尝试过的。有没有人有任何想法，或者我可以采取另一种方式？

首先，我使用的是 MEAN 堆栈，它表示生成索引.html，nodejs 创建模板，角度是应用程序。

索引.html

{includes header.tpl}
<scripts> ... </scripts>
<my-app> Loading AppComponent content here ...</my-app>
{includes footer.tpl}

在我的 header.tpl 中，我有一些指令，我希望角度应用程序解释它们

header.tpl

<html> 
   <header> ... </header>
   <body>
       <div *ngIf='user.status === "new" '> ADDED THIS </div>
   ...

app.component.ts

import { Component, Inject } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
@Component({
    moduleId: module.id,
    selector: 'my-app',
    template: `<h1>Hello</h1> <div *ngIf='user.status === "new"'> ADDED THIS 2 </div>`,
})
export class AppComponent {
     public user:any = {};
     constructor(@Inject(ActivatedRoute) public activatedRoute: ActivatedRoute) {
          this.checkParams();
     }
    private checkParams() {
        this.activatedRoute.queryParams.subscribe((params: Params) => {
            if (!!params['status'] && params['status'] === 'new') {
                this.user.status = 'new';
                console.log('I am new');
            } else {
                console.log('I am NOT new');
                this.user.status = 'old';
            }
            console.log('user', this.user);
        });
    }
}

当我通过以下方式访问我的应用程序时

域.com？状态=新建

只显示"添加了

这个 2"，但我也想显示"添加了这个"。如您所见，"添加此 2"在<my-app>内运行，"添加此"在外部运行。

所以知道吗？谢谢。

很简单，这是行不通的。标题的代码不在my-app标签内，所以 Angular 当然不会接受它。

您希望由 Angular 渲染的所有内容都需要位于应用程序的根标记内或应用程序的组件中。

相关内容

最新更新

热门标签：