Question

我有一个主页面，我想分隔页眉主体和页脚。因为在其他页面中我不需要标题。

_layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <base href="/" />
</head>
<body>
<main-app></main-app>
</body>
</html>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { HttpModule, JsonpModule } from '@angular/http';
import { ModuleWithProviders } from '@angular/core';
import { AppComponent} from "./app.component";
import { EqualValidator } from "./Validation/equal.validator.directive";
import { LoginComponent } from "./Components/login.Component";
import { HomeComponent } from "./Components/home.component";
import { DashBoardComponent } from "./Components/dashBoard.Component";
import { FooterComponent } from "./Components/footer.Component";

const appRoutes: Routes = [
    { path: '', redirectTo: 'Home/Index', pathMatch: 'full' },
    { path: 'Account/Login', component: LoginComponent },
    { path: 'Home/Index', component: HomeComponent,children:[
            {path: '',component: FooterComponent,outlet: 'footer'}]},
    { path: 'DashBoard/Index', component: DashBoardComponent}
];

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


@NgModule({
    imports: [BrowserModule, FormsModule, HttpModule, routing],
    declarations: [AppComponent, LoginComponent, HomeComponent, DashBoardComponent, EqualValidator,FooterComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

如果我删除子路由，应用程序运行良好。我还添加了forChild（）根目录，但未加载页脚组件。

我在这里找到了工作样本

https://plnkr.co/edit/sgGDpti43GPM5cHntPpu?p=preview 但我面对无法匹配任何路线：＆＃39;＆＃39; 错误

home.component.ts

import { Component } from '@angular/core';
    @Component({
        selector: 'Home-app',
        template: `
        <br>
       <br>
       <br>

        my home!!!!

       <br>
       <br>
       <br>

    <router-outlet name="footer"></router-outlet>
      `
    })

    export class HomeComponent {


    }

footer.component.ts

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

@Component({
    selector: 'Footer-app',
    templateUrl: '<p>Copy rights emakitri 2017</p>'
})
export class FooterComponent {
    constructor() {
        console.log("test");
    }
}

无法匹配任何路线：＆＃39;＆＃39; angular 2 asp.net核心

0 个答案: