如何从嵌套组件触发应用程序组件中的路由器插座？

Question

如果我有这样的设置

app-component
|   |_navigation-component
|         |_link-component
|
|_router-outlet

如何从链接组件触发路由器插座？

通常情况下，当我们在同一个模板中时，我们会有类似的东西

<nav>
  <ul>
    <li><a [router-link]="['home']">Home</a></li>
    <li><a [router-link]="['portfolio']">Portfolio</a></li>
    <li><a [router-link]="['about']">About</a></li>
  </ul>
</nav>

<router-outlet></router-outlet>

看到我更喜欢这样做

<div>
    <nav-component></nav-component>

    <router-outlet></router-outlet>
</div>

<!-- inside nav-component template -->
<nav>
    <link-component></link-component>
</nav>

<!-- inside link component template -->
<li>
    <a [router-link]="['home']">Home</a>
</li>

到目前为止从2层触发链接不起作用。怎么办呢？

更新

我想我会展示我是如何建立起来的，而不是以某种手动方式触发它。

app-routing.module

export const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'home',       component: HomePageComponent },
    { path: 'examples',   component: ExamplesPageComponent },
    { path: 'howitworks', component: HowItWorksPageComponent },
    { path: 'resources',  component: ResourcesPageComponent },
    { path: 'aboutus',    component: AboutUsPageComponent }
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [
        RouterModule
    ]
})

export class AppRoutingModule {}

link data

export const LinkData: Array<LinkParams> = [
    { Link: 'Home',         Trigger: 'home',       Type: 'main' },
    { Link: 'Examples',     Trigger: 'examples',   Type: 'main' },
    { Link: 'How It Works', Trigger: 'howitworks', Type: 'main' },
    { Link: 'Resources',    Trigger: 'resources',  Type: 'main' },
    { Link: 'About Us',     Trigger: 'aboutus',    Type: 'main' }
]
//the data I'm iterating down into the link component

app.component (template)

<div  class="appComp-grid" [ngStyle]="{'grid': Grid.GridCode}">
    <link-container [ngStyle]="{'grid-area': Grid.GridAreas.LinkContainer}" [SiteLinks]="Links"></link-container>

    <div [ngStyle]="{'grid-area': Grid.GridAreas.BodySection, 'justify-content': 'stretched'}">
        <router-outlet></router-outlet>
    </div>

    <footer-component [ngStyle]="{'grid-area': Grid.GridAreas.FooterSection}"></footer-component>
</div>

link-container.component (template)

<header class="linkComp-grid" [ngStyle]="{'grid': Grid.GridCode}">

    <div [ngStyle]="{'grid-area': Grid.GridAreas.MainLink, 'display': 'grid', 'grid-auto-columns': 'auto', 'grid-auto-flow': 'column'}">

        <link-component *ngFor="let a of SiteLinks" [Link]="a"></link-component>

    </div>

    <div [ngStyle]="{'grid-area': Grid.GridAreas.FeatureLink, 'grid-auto-flow': 'column', 'justify-self': 'end'}">
        <h3>Feature Link</h3>
    </div>

</header>

link.component (template)

<a class="linkComp-grid"
   [ngStyle]="{'grid': Grid.GridCode}"
   [routerLink]="Link.Trigger" routerLinkActive="active"
>
    <p [ngStyle]="{'grid-area': Grid.GridAreas.LinkArea, 'text-align': 'center'}">
        {{Link.Link}}
    </p>
</a>