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，它具有＆＃39; navigation-component＆＃39;的选择器，然后您可以将该标记添加到您的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>占位符中。

如何渲染部分内部模板

1 个答案: