Question

我对Angular 2 Final Release路由有一些问题。当我在子组件中添加[routerLink]时，会发生此错误：

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

这是我的树：

app
|
|___ app.routes.ts
|___ app.module.ts
|
|___ user
|_______ user.routes.ts
|_______ user.module.ts
|_______ user.component.ts
|
|_______ login
|____________ login.module.ts
|____________ login.component.html
|____________ login.component.ts

现在文件内容：

app.routes.ts

import { Routes } from '@angular/router';

import { UserRoutes } from './user/user.component';

export const routes: Routes = [
  ...UserRoutes
];

app.module.ts

import { APP_BASE_HREF }  from '@angular/common';

import { NgModule }             from '@angular/core';
import { BrowserModule }        from '@angular/platform-browser';
import { RouterModule }         from '@angular/router';
import { HttpModule }           from '@angular/http';

import { AppComponent }         from './app.component';
import { routes }               from './app.routes';

// Modules
import { UserModule }           from './user/user.module';


@NgModule({
  imports: [BrowserModule, HttpModule, RouterModule.forRoot(routes), UserModule],
  declarations: [AppComponent],
  providers: [
    {
      provide: APP_BASE_HREF,
      useValue: '<%= APP_BASE %>'
    },

  ],
  bootstrap: [AppComponent]

})

export class AppModule { }

user.routes.ts

import { Route }                from '@angular/router';

import { UserComponent }        from './user.component';
import { LoginComponent }       from './login/login.component';



export const UserRoutes: Route[] = [
    {
        path: '',
        component: UserComponent,
        children: [
            {
                path: 'login',
                component: LoginComponent
            }
        ]
    }
];

user.module.ts

import { NgModule }                     from '@angular/core';
import { CommonModule }                 from '@angular/common';
import { RouterModule }                 from '@angular/router';

import { UserComponent }                from './user.component';

import { LoginModule }                  from './login/login.module';



@NgModule({
    imports: [CommonModule, RouterModule, LoginModule],
    declarations: [UserComponent],
    exports: [UserComponent]
})

export class UserModule { }

user.component.ts

import { Component } from '@angular/core';

/**
 * This class represents the lazy loaded UserComponent.
 */
@Component({
    selector: 'user',
    template: '<router-outlet></router-outlet>',
})
export class UserComponent { }

login.module.ts

import { NgModule }             from '@angular/core';
import { CommonModule }         from '@angular/common';
import { ReactiveFormsModule }  from '@angular/forms';
import { LoginComponent }       from './login.component';


@NgModule({
    imports: [CommonModule, ReactiveFormsModule],
    declarations: [LoginComponent],
    exports: [LoginComponent]
})

export class LoginModule { }

login.component.html

<button [routerLink]="['/']">Back home</button>

在login.component.html上，如果我删除按钮，一切都运行良好。此外，如果我在 user.component.ts 中添加按钮，它可以工作：

import { Component } from '@angular/core';

/**
 * This class represents the lazy loaded UserComponent.
 */
@Component({
    selector: 'user',
    template: '<button [routerLink]="[\'/\']">Back home</button>',
})
export class UserComponent { }

Answer 1

父模块将指令，组件和管道继承到子模块中。您还需要将所有必需的模块导入到子项中。在LoginModule中，您从未导入RouterModule

Angular 2 Final Release路由问题

1 个答案: