Question

我正试图在我的角度应用程序中实现可自定义的各种导航栏。

这是我的app.component模板

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

import { AuthGuard } from './_guards/index';

import { LoginComponent } from './login/index';

// Reports section of the website
import { ReportsComponent } from './reports/index';
import { DashboardComponent } from './reports/dashboard/index';
import { SampleComponent } from './reports/sample/index';

// Corporate section of the website
import { CorporateComponent } from './corporate/index';
import { CorpNavbarComponent } from './corporate/corpNavbar/index';

const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },
    {
        path: 'reports', component: ReportsComponent, canActivate: [AuthGuard],
        children: [
            { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
            { path: 'dashboard', component: DashboardComponent },
            { path: 'sample', component: SampleComponent }
        ]
    },
    {
        path: 'corporate', component: CorporateComponent, canActivate: [AuthGuard],
        children: [
            { path: '', component: CorpNavbarComponent, outlet: 'navbar'}
        ]
    }


    // otherwise redirect to home
    { path: '**', redirectTo: 'reports' }
];

export const routing = RouterModule.forRoot(appRoutes);

这是我的app.routing

static async Task<String> sayHelloAsync(){

       await Task.Delay(1000);
       return "hello world";

}

static void main(string[] args){

      var data = sayHelloAsync();
      //implicitly waits for the result and makes synchronous call. 
      //no need for Console.ReadKey()
      Console.Write(data.Result);
      //synchronous call .. same as previous one
      Console.Write(sayHelloAsync().GetAwaiter().GetResult());

}

我想要的是能够根据网站的部分替换导航栏的导航部分。这可能吗？

Answer 1

不确定我是否正确理解了您的问题，但我会尝试一下。那么，您打算根据您当前所在的页面替换部分导航栏？

您可以将应用组件作为应用的所有动态部分的中心。假设你有app组件作为你的基本html结构和其他三个组件，分别是Navbar1，Navbar2和Content。

app.component：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <router-outlet name="nav"></router-outlet>

    <router-outlet name="content"></router-outlet>
  </body>
</html>

然后，您必须在路径中指定必须加载组件：

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full', outlet: },
  { path: 'home', component: HomeComponent, outlet: content },
  { path: 'category1', component: Navbar1, outlet: navbar1 },

此链接可能会帮助您解决问题。

http://onehungrymind.com/named-router-outlets-in-angular-2/

来自儿童路线的Angular 4父路由器插座

1 个答案: