Question

嗨，我对角2很新问题是我实现路由工作正常然后在New_Contact路由我用模板替换templateUrl但它仍然加载该路由的旧html文件

旧组件
new_contact.component.ts

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

CURRENT COMPONent

@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
  ]
);

放置路由器链接的Navbar组件

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 install和npm start，我们很高兴

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

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

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

1 个答案: