Question

我没有SPA。我有一个html页面（index.html）想要托管一些angular2组件，或者可以通过指令来处理index.html中的html标签。 index.html仅用于初始化angular2应用程序？！请查看此http://plnkr.co/edit/TpsBwe?p=preview以澄清我想要做的事情。在Angular 1中，我可以将角度控制器附加到index.html中的任何标记，并使用标记内的控制器范围。非常感谢任何建议。

Answer 1

在Angular2中，一切都必须在根组件中。您可以在根组件的模板中使用<ng-content></ng-content>来转换根组件的子元素，但据我所知，这在根组件上是有限的。

Answer 2

不，你不能这样做。您希望Angular触摸的所有内容都需要位于主应用程序标记内。

但是你可以很好地嵌套，所以这是可能的：

import {Component} from "angular2/core";

@Component({
    selector: 'sub-page',
    directives: [Navbar],
    pipes: [],
    providers: [],
    template: `
<br>
<br>
<div><button (click) = "onSave()">I'm back in the app</button></div>
`
})
export class SubPage {
    constructor() {}

    subPage() {
        alert("I'm here");
    }
}

然后你将它添加到你的主要组件：

//our root app component
import {Component} from 'angular2/core'
import {MyClickDirective,MyClickDirective2,SubPage} from './mydirectives'

// Alerter fn: monkey patch during test
export function alerter(msg?: string) {
    window.alert(msg);
}
@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
     <button (click) = "onSave()">Save.Work</button>
    </div>
    <sub-page></subpage>
  `,
  directives: [MyClickDirective,MyClickDirective2,SubPage]
})
export class App {
    alert = alerter;
  constructor() {
    this.name = 'Angular2'
  }
    onSave(event: KeyboardEvent) {
        let evtMsg = event ? ' Event target is ' + (<HTMLElement>event.target).innerText : '';
        this.alert('Saved.' + evtMsg)
    }
}

请注意，我在指令中包含新定义的SubPage类，并在模板中使用<sub-page></sub-page>标记。

只需嵌套组件，即可为您提供相同的布局。

Angular 2处理app模板中的html标签？

2 个答案: