如何渲染部分內部模板

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>占位符中。