最近,我开始玩angular 2.到目前为止都很棒.所以,为了学习使用angular-cli,我启动了一个个人演示项目.

有了基本的路由设置,我现在想从header导航到一些路由,但是由于我的header是router-outlet的父级,我收到了这个错误.

app.component.html

<app-header></app-header> // Trying to navigate from this component
    <router-outlet></router-outlet>
<app-footer></app-footer>

header.component.html

<a [routerLink]="['/signin']">Sign in</a>

现在我部分地理解了,我猜,由于该组件是一个router-outlet左右的包装器,所以不可能以这种方式访问router.那么,在这种情况下,是否有可能从外部访问导航?

如果需要的话,我很乐意补充更多信息.提前谢谢你.

Update

1-My package.json已经有稳定的@angular/router 3.3.1版本.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AlertModule  } from 'ng2-bootstrap';
import { LayoutModule } from './layout/layout.module';
import { UsersModule } from './users/users.module';
import { AppRoutingModule } from  './app-routing.module';
import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './shared/components/not-found.component';

@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AlertModule.forRoot(),
    LayoutModule,
    UsersModule,
    AppRoutingModule  --> This is the routing module. 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SigninComponent } from './users/signin/signin.component';
import { PageNotFoundComponent } from './shared/components/not-found.component';

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

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

export class AppRoutingModule {}

我try 访问的路径是从另一个module(即UsersModule)授权的

user-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SigninComponent } from './signin/signin.component';

const usersRoutes: Routes = [
  { path: 'signin',  component: SigninComponent }
];
@NgModule({
  imports: [
    RouterModule.forChild(usersRoutes)
  ],
  exports: [
    RouterModule
  ]
})

export class UsersRoutingModule { }

虽然我试图从属于Layout模块的一部分的组件进行导航,但没有路由模块的概念.这就是导致错误的原因.

Layout.module.ts

import { NgModule } from '@angular/core';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
  declarations: [HeaderComponent, FooterComponent],
  exports: [HeaderComponent, FooterComponent]
})
export class LayoutModule{}

我正试图从HeaderComponent米开到HeaderComponent米.如果需要,我很乐意提供更多信息.

推荐答案

如果组件使用来自的任何组件或指令(在本例中为routerLink<router-outlet>),则每@NgModule()个组件中需要添加RouterModuleimports个.

import {RouterModule} from '@angular/router';
@NgModule({
   declarations:[YourComponents],
   imports:[RouterModule]

declarations: []是使组件、指令、管道在当前模块内为人所知.

exports: []是使组件、指令、管道可用于导入模块.仅添加到declarations中的内容是模块专用的.exports把它们公之于众.

另见第https://angular.io/api/router/RouterModule#usage-notes

Typescript相关问答推荐

如何获取嵌套对象属性的正确类型?

为什么空对象可以将类型断言为任何内容?

如何从TypScript中的接口中正确获取特定键类型的所有属性?

用泛型类型覆盖父类函数导致类型y中的Property x不能赋给基类型Parent中的相同属性."'''''' "

有没有可能使用redux工具包的中间件同时监听状态的变化和操作

根据上一个参数值查找参数类型,也返回类型

使某些(嵌套)属性成为可选属性

对扩展某种类型的属性子集进行操作的函数

Vue SFC中的多个脚本块共享导入的符号

在包含泛型的类型脚本中引用递归类型A<;-&B

TypeScrip界面属性依赖于以前的属性-针对多种可能情况的简明解决方案

如何创建一家Reduxstore ?

为什么&;(交集)运算符会删除不相交的属性?

保护函数调用,以便深度嵌套的对象具有必须与同级属性函数cargument的类型匹配的键

如何创建内部和外部组件都作为props 传入的包装器组件?

如何为带有参数的函数类型指定类型保护?

是否可以定义引用另一行中的类型参数的类型?

如何知道使用TypeScript时是否在临时工作流内运行

如何在TypeScript中声明逆变函数成员?

数据库中的表请求返回如下日期:2023-07-20T21:39:00.000Z 我需要将此数据格式化为 dd/MM/yyyy HH:mm