Angular2如何使用模板？

Question

I am trying to use templates with Angular2 and it is not working as expected. 我正在尝试将模板与Angular2一起使用，但无法正常工作。 Here is what I have tried so far. 到目前为止，这是我尝试过的。 Does anyone have any ideas or maybe another way that I could approach it? 有没有人有任何想法或其他可以解决的方法？

First of all, I am using MEAN stack that express generates an index.html, nodejs creates the templates and angular is the app. 首先，我使用MEAN堆栈来表达生成index.html，nodejs创建模板，angular是应用程序。

index.html 的index.html

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

Inside my header.tpl I have some directives that I would like angular app interpret them 在我的header.tpl内，我有一些指令，我希望角度应用程序解释它们

header.tpl header.tpl

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

app.component.ts 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);
        });
    }
}

When I access my application by 当我通过访问我的应用程序时

domain.com?status=new domain.com?status=new

only shows 'ADDED THIS 2', but I also want to show 'ADDED THIS'. 只显示“ ADDED THIS 2”，但我也想显示“ ADDED THIS”。 As you can see, 'ADDED THIS 2' is running inside <my-app> and 'ADDED THIS' outside. 如您所见，“ ADDED THIS 2”在<my-app>内部运行，而“ ADDED THIS”在外部运行。

So any idea? 有什么想法吗？ Thank you. 谢谢。

Answer 1

It's pretty simple this won't work. 很简单，这行不通。 The code of your header isn't inside the my-app tags, so Angular won't pick up on it of course. 标头的代码不在my-app标签内，因此Angular当然不会使用它。

Everything that you want to be rendered by Angular needs to be inside the root tags of you app or in a component of the app. 想要由Angular呈现的所有内容都必须位于应用程序的根标签中或应用程序的组件中。

Angular2如何使用模板？

问题描述

1 个解决方案

解决方案1
0 2017-05-22 13:21:58

Angular2如何使用模板？

问题描述

1 个解决方案

解决方案1 0 2017-05-22 13:21:58

解决方案1
0 2017-05-22 13:21:58