Question

所以，我使用angular 4来开发应用程序，我遇到了问题。我想使用angular 4路由在一个页面中包含两个组件，但它似乎并不像我想要的那样可行。我有一个组件标题，它只是一个导航栏，我有另一个组件主页，它已经有一个导航栏，所以我不想包含标题与主页，但其他组件登录例如。因此，我尝试查看角度文档，最接近这种情况的方法是与孩子一起，但我不希望登录成为标题的孩子。我尝试将路由器插座和我的 app.module.ts 文件中的两个组件放入，但它没有用完。

Answer 1

对于需要URL路径的每个组件，也就是路径，只需在（login/login.route.ts）中添加这样的文件：

import {
    Routes,
    RouterModule
} from "@angular/router";

import {
    LoginComponent
} from "./login-component";

const loginRoutes:Routes = [
    {
        path: "login",
        component: LoginComponent,
        pathMatch: "full"
    }
];

export const loginRouting = RouterModule.forRoot(loginRoutes);

别忘了将它添加到app.component.ts中！

import { NgModule } from "@angular/core";
import { HttpModule } from "@angular/http";
import { App }   from "./app";
...    

import { LoginRouter} from "./login/login.route";

@NgModule({
    imports: [
      ...
      LoginRouter,
      ...
    ],
    declarations: [
      App,
      LoginComponent
      ...
    ],
    providers: [
      LoginService
      ...
    ],
    bootstrap: [
      App
      ...
    ],
})
export class AppModule {}

Angular 4路由 - 可以有两个路由器组件

1 个答案: