当前位置:  开发笔记 > 编程语言 > 正文

Angular2 Component Router基本问题

如何解决《Angular2ComponentRouter基本问题》经验,为你挑选了1个好方法。

开始学习angular2 beta组件路由.到目前为止我已经这样做了.

http://plnkr.co/edit/4YWWGhuBWd2CoWpC3GeY?p=preview

我复制了以下必需的CDN.请看看这里.

    
    
    
    


    
    

SRC/boot.ts

import {Component} from 'angular2/core';
import {ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,LocationStrategy} from 'angular2/router';
import {bootstrap}        from 'angular2/platform/browser';

import{ComponentOne} from 'src/cone';
import{ComponentTwo} from 'src/ctwo';

@Component({
  selector: 'my-app',
  template: `
    

Component Router

`, directives: [ROUTER_DIRECTIVES] }) @RouteConfig([ {path:'/component-one', name: 'ComponentOne', component: ComponentOne}, {path:'/component-two', name: 'ComponentTwo', component: ComponentTwo} ]) export class AppComponent { } bootstrap(AppComponent, [ ROUTER_PROVIDERS ]);

SRC /锥

 import {Component,View} from 'angular2/core';

 @Component({
    template: `
    

first Component

` }) export class ComponentOne{ constructor(){ console.log("first component being called"); } }

SRC/CTWO

 import {Component,View} from 'angular2/core';

 @Component({
    template: `
    

Second Component

` }) export class ComponentTwo{ constructor(){ console.log("Second component being called"); } }

请检查您的开发控制台.它给出了一个错误

EXCEPTION:在实现LocationStrategy期间出错!(RouterLink - >路由器 - >位置 - > LocationStrategy).BrowserDomAdapter.logError @ angular2.dev.js:23514个angular2.dev.js:23514原始异常:无基本href集.请提供APP_BASE_HREF标记的值或向文档添加基本元素.

此外,它不会将我重定向到目的地.我试图添加但它允许给出错误.

我希望链接正常工作.



1> Günter Zöchb..:

无论是添加元素或添加APP_BASE_HREF到引导

bootstrap(AppComponent, [
  ROUTER_PROVIDERS, 
  // usually
  provide(APP_BASE_HREF, {useValue: '/'})
  // for Plunker
  // bind(APP_BASE_HREF).toValue(location.pathname)
]);

答案由Nyks编辑:

在我的plunker中,我更新了以下部件,

import {Component,bind} from 'angular2/core';
import {ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router';

export class AppComponent { }

    bootstrap(AppComponent, [
      ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname)
]);

最终答案:http://plnkr.co/edit/4YWWGhuBWd2CoWpC3GeY?p =preview

另见http://plnkr.co/edit/iRUP8B5OUbxCWQ3AcIDm?p=info

以及angular.io 的ROUTING&NAVIGATION开发人员指南

推荐阅读
N个小灰流_701
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有