如何渲染部分内部模板

Question

我正在使用角度2作为项目,我想在模板内部渲染部分而不创建组件.那可能吗？

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

@Component({
  selector: 'ng2-showroom-app',
  providers: [],
  templateUrl: 'app/views/ng2-showroom-template.html',
  directives: [ROUTER_DIRECTIVES],
  pipes: []
})
@RouteConfig([

])
export class Ng2Showroom {

}

NG2-展厅模板

<!-- import navigation.html here -->

<p>
  Hello World
</p>

<router-outlet></router-outlet>

Answer 1

好吧，如果您的模板是另一个组件的一部分，请将其称为 NavigationComponent，它具有“navigation-component”选择器，然后您可以将该标签添加到您的 ng2-showroom-app 模板并将导航组件添加为指令。 。

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {NavigationComponent} from 'src/navigationComponent';

@Component({
  selector: 'ng2-showroom-app',
  providers: [],
  templateUrl: 'app/views/ng2-showroom-template.html',
  directives: [ROUTER_DIRECTIVES, NavigationComponent],
  pipes: []
})
@RouteConfig([

])
export class Ng2Showroom {

}

<navigation-component></navigation-component>

<p>
  Hello World
</p>

<router-outlet></router-outlet>

但我猜你真正想要的是更常见的场景，即母版页始终存在 HTML，然后基于导航交换出模板......

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {Page1Component} from 'src/page1component';
import {Page2Component} from 'src/page2component';

@Component({
  selector: 'ng2-showroom-app',
  providers: [],
  templateUrl: 'app/views/ng2-showroom-template.html',
  directives: [ROUTER_DIRECTIVES],
  pipes: []
})
@RouteConfig([
  { path: '/page1', as: 'Page1', component: Page1Component },
  { path: '/page2', as: 'Page2', component: Page2Component }])
export class Ng2Showroom {

}

<p>HTML always shown above content, regardless of navigation.</p>

<a [routerLink]="['Page1']">Link to Page 1</a>
<a [routerLink]="['Page2']">Link to Page 2</a>

<router-outlet></router-outlet>

<p>HTML always shown below content.</p>

现在，当他们单击“链接到第 1 页”时，您在 Page1Component 中定义的任何内容都将显示在<router-outlet>占位符中。