如何渲染部分内部模板

Question

I am using angular 2 for a project and i want to render a partial inside a template without creating a component. Is that possible?

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-showroom-template

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

<p>
  Hello World
</p>

<router-outlet></router-outlet>

Answer 1

Well, if your template is part of another component, call it, NavigationComponent which has a selector of 'navigation-component', then you can add that tag to your ng2-showroom-app template and add the navigation component as a directive...

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>

But I'm guessing what you are really going for is the more common scenario of a master page that has HTML that is always there, and then a template that gets swapped out, based on navigation...

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>

Now when they click on 'Link to Page 1', whatever you've defined in Page1Component will display within the <router-outlet> placeholder.