Kısmi iç şablonlar nasıl oluşturulur

Question

Bir proje için açısal 2 kullanıyorum ve bir bileşen oluşturmadan şablonun bir parçasını oluşturmak istiyorum. Mümkün mü?

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-sergi salonu-şablon

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

<p> 
    Hello World 
</p> 

<router-outlet></router-outlet> 

Answer 1

Eh, senin şablon başka bileşenin bir parçası ise, diyoruz, 'navigasyon bileşenli' bir seçicisi NavigationComponent, o zaman o ekleyebilir senin NG2-sergi salonu-app şablonuna etiketi ve bir direktif olarak navigasyon bileşeni eklemek ...

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> 

Ama ben

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> 

Şimdi hep orada HTML ve dışarı takas navigasyon dayanan alır ardından bir şablon olan bir ana sayfasının daha yaygın senaryo ... gerçekten ne gidiyorsun edilir tahmin "Sayfa 1'e Bağla" yı tıkladıklarında, Page1Component içinde tanımladığınız her şey, <router-outlet> yer tutucusunda görüntülenir.