Angular 2.渲染模板我已经从templateUrl中移除

Question

嗨，我是 angular 2.
的新手问题是我实现了路由，它工作正常但是然后在 New_Contact 路由上我用模板替换了 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
  ]
);

放置路由器link的导航栏组件

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>

下面是 link 完成的代码，如果你们中的任何人都可以看一下，只需执行 npm install 和 npm start 我们就可以开始了

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

我还包括使用 npm install 进行计算的下划线库

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。这是要做的更新：

{
  "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 文件保持不变，因为您的更新未在浏览器的应用程序中编译和考虑...

Angular 2.渲染模板我已经从templateUrl中移除

Angular 2. Rendering template I have removed from templateUrl

angularjs

angularjs-directive

angular2-routing

angular