标签: angular2-routing

当我尝试RouteData使用TypeScript在Angular2 Beta中使用时,我遇到了问题.

我将它注入构造函数并正确导入它

import {RouteConfig, Router, RouteData} from 'angular2/router';

export class App {
    constructor(public router: Router, public data: RouteData) {
        // router works - routedata not
    }
}

我到了No provider for RouteData! (App -> RouteData).

如果我将它包含在这样的组件注释中

@Component({
  //..
  providers: [RouteData]
})

我收到此错误: Cannot resolve all parameters for RouteData(?). Make sure they all have valid type or annotations.

尝试使用以下代码创建菜单

<aside id="left-panel">
	<span class="minifyme"> <i class="fa fa-arrow-circle-left hit"></i>
	</span>
	<nav>
		<ul>
			<li *ngFor="#menu of menus" [class.open]="menu === selectedMenu"
				(click)="onSelect(menu)"><a [routerLink]="[menu.action]"> <i
					class={{menu.icon}}></i> <span class="menu-item-parent">{{menu.displayname}}</span>
					<b *ngIf="menu.childrens.length>0"> <em class="fa"
						[ngClass]="{'fa-minus-square-o': menu === selectedMenu, 'fa-plus-square-o': menu !== selectedMenu}"></em>
				</b>
			</a>

				<ul *ngIf="menu.childrens" [class.show]="menu === selectedMenu">
					<li *ngFor="#submenu of menu.childrens" (click)="onSelect(menu)">
						<a> {{submenu.displayname}} </a>
					</li>
				</ul></li>
		</ul>
	</nav>
</aside>

import {Component, OnInit} from 'angular2/core';
import {Router} from 'angular2/router';
import {RouteConfig,RouterLink, ROUTER_DIRECTIVES} from 'angular2/router';
import {MenuService} from './menu.service';
import {Menu} from './menu';


@Component({ …

应用程序拒绝查找symbol-observable- 或zone.js确实 - 即使rxjs肯定在那里.

得到的一切像:

<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script>
System.config({
  map: {
    '@angular': 'node_modules/@angular',
    'rxjs': 'node_modules/rxjs'
  },
  packages: {
    'dist': { defaultExtension: 'js', format: 'register', main: 'boot.js' },
    '@angular/common': { defaultExtension: 'js', main: 'index.js' },
    '@angular/compiler': { defaultExtension: 'js', main: 'index.js' },
    '@angular/core': { defaultExtension: 'js', main: 'index.js' },
    '@angular/http': { defaultExtension: 'js', main: 'index.js' },
    '@angular/platform-browser': { defaultExtension: 'js', main: 'index.js' },
    '@angular/platform-browser-dynamic': { defaultExtension: 'js', main: 'index.js' },
    '@angular/router': { defaultExtension: …

在RC1的新路由器中,无法再使用useAsDefault.相反,现在默认路由在app.component.ts中实现

  ngOnInit() {
    this.router.navigate(['/login']);
  }

如果我按浏览器上的" 重新加载"按钮刷新页面,那么我当前的页面网址http://localhost:3000/heroshell/heroes将会更改为,http://localhost:3000/login因为每次按下"重新加载"按钮,它都将通过app.component.ts

  ngOnInit() {
    this.router.navigate(['/login']);
  }

我的当前页面仍会显示,但出现错误.

browser_adapter.ts:78 EXCEPTION: Error in app/apps/hero/hero-shell.component.html:3:7
browser_adapter.ts:78 ORIGINAL EXCEPTION: TypeError: Cannot read property 'map' of null

这是app/apps/hero/hero-shell.component.html

<my-app1>
<h1>{{title}}</h1>
<nav>
    <a [routerLink]="['dashboard']">Dashboard</a>
    <a [routerLink]="['heroes']">Heroes</a>
</nav>
<router-outlet></router-outlet>
</my-app1>

所以我的问题是

1. 什么是"属性'映射'为null"？
2. 有没有办法在不通过ngOnInit()的情况下制作默认路由？
3. 或者如何在页面重新加载期间解决此URL和页面内容不一致的问题？

Beta路由没有这种行为,因为不需要通过ngOnInit()来定义默认路由.

有关我的文件夹结构和路由设置的更多信息,请参阅定义但未识别的Angular2 RC1子路由

更新:如果我使用

  { path: '/', component: Login }, 

配对

  ngOnInit() {
    this.router.navigate(['/']);
  }

然后,URL将更改为http://localhost:3000/命中重新加载按钮时错误保持不变.

同样,如果我使用上面的更新将路径更改为' ',那么当重新加载按钮被点击时,URL将被更改为' http:// localhost:3000 / '并且错误保持不变.

解决问题的关键是使用两件事的组合:

1. 在app.component.ts中的@Routes中使用'/'或'*'定义根路径

   {path:'*',component:Login},

2. 摆脱 …

我刚刚使用Angular CLI创建了一个新的角度项目,并使用以下命令在其中搭建了一个新的路由用户.

ng new myproj
cd myproj 
ng g route user

然后我使用了Angular CLI服务器ng serve.

但是当我访问页面时,我无法看到登录模板的内容,/login除非我添加了某个路径的链接,即:

<a [routerLink]="['/user']">User Info</a>

当我添加上面的行,然后router-outlet填充,但如果我删除此行,则router-outlet再次呈现为空.

这里发生了什么事？

有人知道为什么会这样吗？

示例文件

/src/app/myproj.component.ts

import { Component } from '@angular/core';
import { Routes, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router';

@Component({
  moduleId: module.id,
  selector: 'myproj-app',
  templateUrl: 'myproj.component.html',
  styleUrls: ['myproj.component.css'],
  directives: [ROUTER_DIRECTIVES],
  providers: [ROUTER_PROVIDERS]
})
@Routes([
  {path: '/user', component: UserComponent}
])
export class MyprojAppComponent {
  title = 'Main Component working!';
} …

我有一个使用Angular 2的简单应用程序.我目前使用NgModule在RC5上.我使用的是3.0.0-beta.2路由器.

我的默认应用网址目前是

HTTP://本地主机:8080 /#

当我使用Auth0服务登录时,在成功登录后,在URL中获取access_token和id_token.重定向网址看起来像这样

HTTP://本地主机:8080 /#=的access_token&YKXQzxxx = id_token eyjQWASxxx

但现在Angular路由器尝试将其映射为路由.所以我得到以下错误.

**

未捕获(承诺):错误:无法匹配任何路线:'access_token'

**

有没有办法告诉Angular不要这样做.我希望将数据作为路由器参数读回.请帮忙.

我不确定为什么变化检测在这里不起作用.我尝试过一些东西,包括一个setTimeout.我正在使用RC5.基本上我想根据我的URL中的参数更改内容.应该很简单吧？

thanks.ts

import { Component } from '@angular/core';
import { Card } from '../../components/card/card';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'sd-thanks',
  styleUrls: ['thanks.css'],
  directives: [Card],
  templateUrl: 'thanks.html'
})
export class Thanks {
  params: any;
  coming: any;
  constructor(public route: ActivatedRoute) {
    this.params = this.route.params.subscribe(
      params => {
        this.coming = params['coming'];
        console.log(this.coming); // this consoles the correct true/false value
      }
    );
  }
}

thanks.html

<card>
  <div *ngIf="coming" class="card-content">
    <span class="card-title">We can't wait to see you!</span>
  </div>
  <div *ngIf="!coming" class="card-content">
    <span …

我的文件夹结构/src/app/some-module/some-component和src/public/images/user.png.现在,当我想要在我的某个组件中展示一个图像时,我必须给出一条路径,../../../public/images/user.png一旦图像数量增加,它似乎过于天真和浪费.

我们是否在angular2中有一个路由机制或相对路径来提供静态文件.我正在使用Angular2和webpack.

我试图在运行时向Angular2路由器添加一些配置.

我正在做的很简单.在AppModule中,我按照指南加载路由器的初始配置

的AppModule

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    BrowserModule,
    routing,  
    ...
  ],
  providers: [appRoutingProviders],
  bootstrap: [AppComponent]
})
export class AppModule { }

appRoutes - app.routes.ts

const appRoutes: Routes = [
        { path: '', component: PocWelcomeComponent },
        { path: '**', component: PageNotFoundComponent }
    ];

    export const appRoutingProviders: any[] = [

    ];

    export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

然后在AppComponent onInit()方法中添加一些这样的路由

AppComponent

export class AppComponent implements OnInit {

  constructor(
    private router: Router
  ) {}

  ngOnInit() {
    let routes = this.router.config;
    routes.push({ …

我在angular 4应用程序中实现基本路由,并在浏览器上加载应用程序时出现以下错误.我在approuting.module中定义了路由,也引用了Ngmodule中的路由器模块以及approuting.module.不确定是什么问题

Can't bind to 'routerLink' since it isn't a known property of 'a'.

Can't bind to 'routerLink' since it isn't a known property of 'a'. ("ew" [hidden]="!dataItem.isVisibleView">
                                                        <a [ERROR ->][routerLink]="['/view', dataItem.movieId, 'responses']" routerLinkActive="active"><i class="fa fa-fil"): ng:///MovieModule/MovieComponent.html@85:59
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("it" [hidden]="!dataItem.isVisibleEdit">
                                                        <a [ERROR ->][routerLink]="['edit', dataItem.movieId]" routerLinkActive="active"><i class="fa fa-pencil" aria-hidd"): ng:///MovieModule/MovieComponent.html@92:59

以下是我的申请的源代码

movie.component.html中的kendo网格片段

  </kendo-grid-column>
                                             <kendo-grid-column title="View" headerClass="kendoGridHeader" class="kendoGridControlCell">
                                                <ng-template kendoGridCellTemplate let-dataItem>
                                                    <span data-title="View" [hidden]="!dataItem.isVisibleView">
                                                        <a [routerLink]="['/view', dataItem.movieId, 'responses']" routerLinkActive="active"><i class="fa fa-file-text" …