У меня есть одна главная страница, и я хочу разделить заголовок и нижний колонтитул. Потому что на другой странице мне не понадобится заголовок.
_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 столкнулся с ошибкой Не удается сопоставить ни один маршрут: ''
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");
}
}
