Question

我正在尝试使用Angular2的模板，但它没有按预期工作。这是我到目前为止所尝试的。有没有人有任何想法或者其他方式可以接近它？

首先，我使用表达生成index.html的MEAN堆栈，nodejs创建模板，angular是应用程序。

的index.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);
        });
    }
}

当我通过

访问我的应用程序时

domain.com?status=new

仅显示“已添加2”，但我还想显示“已添加此内容”。正如您所看到的，“添加此2”正在<my-app>内部运行并且“在此外部添加”。

所以任何想法？谢谢。

Answer 1

这很简单，这不起作用。标题的代码不在my-app标记内，因此Angular当然不会接受它。

您希望Angular呈现的所有内容都需要位于您应用的根标记内或应用的组件中。

如何使用Angular2处理模板？

1 个答案: