Angular 2. Rendering template我已經從templateUrl刪除

Question

嗨我真的是新的角2.
問題是我實現的路由哪些工作正常，但然後在New_Contact路由我用template替換templateUrl，但它仍然加載舊該路線的html文件

舊組件
new_contact.component.ts

@Component({ 
    selector :'new-contact', 
    templateUrl :'app/ts/html/new_contact_form.html' 
}) 

電流分量

@Component({ 
    selector :'new-contact', 
    template :'Blah' 
}) 

但是，該路線仍舊渲染舊的templateUrl。

Main.ts文件，其中提到的路線是

import { bootstrap } from 'angular2/platform/browser'; 
import { Component, provide } from 'angular2/core'; 
import { ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'; 
import { NavbarComponent } from './navbar.component'; 
import { ContactDisplayComponent } from './contact_display.component'; 
import { NewContact } from './new_contact.component'; 
import { EditContact } from './edit_contact.component'; 



@Component({ 
    selector:'app-start', 
    template:` 
    <navbar></navbar> 
    <router-outlet></router-outlet> 
    `, 
    directives : [NavbarComponent,ROUTER_DIRECTIVES] 
}) 

@RouteConfig([ 
    {path:'/',name:'Home',component:ContactDisplayComponent}, 
    {path:'/New_Contact',name:'New_Contact',component:NewContact}, 
    {path:'/Edit_Contact/:id',name:'Edit_Contact',component:EditContact} 
]) 

export class Main{ 
} 

bootstrap(Main, 
    [ 
    ROUTER_PROVIDERS 
    ] 
); 

導航欄組件，其中路由器鏈接放置

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


@Component({ 
    selector :'navbar', 
    templateUrl:'/app/ts/html/navbar.html', 
    styleUrls : ['../resources/navbar_support.css'], 
    directives:[ROUTER_DIRECTIVES] 
}) 


export class NavbarComponent 
{} 

NAVBAR.HTML

<div id="custom-bootstrap-menu" class="navbar navbar-fixed navbar-default" role="navigation"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <a class="pull-left" href="#"> 
        <img src="../resources/phonebook_brand.png" class="img-responsive"/> 
       </a> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> 
       </button> 
      </div> 
      <div class="collapse navbar-collapse navbar-menubuilder"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a [routerLink]="['Home']">Home</a> 
        </li> 
        <li><a [routerLink]="['New_Contact']">New</a> 
        </li> 
       </ul> 
      </div> 
    </div> 
</div> 

下面是鏈接完成的代碼，如果你的任何一個可以看看只是NPM安裝和NPM開始，我們是好去

https://www.dropbox.com/s/hpuqg8lhtu4wb42/Routing%201%20test.rar?dl=0

我也包括強調使用NPM庫安裝computaion

Answer 1

您的tsconfig.json文件存在一個問題，無法編譯TypeScript文件。路徑/app/js在此文件中不正確。請參閱錯誤：

(...) 
[0] error TS5033: Could not write file '/app/js/new_contact.component.js': EACCES: permission denied, mkdir '/app' 
[0] error TS5033: Could not write file '/app/js/new_contact.component.js.map': EACCES: permission denied, mkdir '/app' 

您應該使用路徑app/js來代替。這裏是UDPATE做：

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "system", 
    "moduleResolution": "node", 
    "outDir": "app/js", // <-------------- 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false 
    }, 
    "exclude": [ 
    "node_modules", 
    "typings/main", 
    "typings/main.d.ts" 
    ] 
} 

你的JS文件仍然是相同的，因爲你的更新未編譯並在瀏覽器的機應用中考慮到...