Question

每当我点击此链接时，都会产生一个空白的插座。

这项工作正常之前我将'contact_content':['contact']}添加到链接中。

menubar.component.html （ KaltimMenubarComponent ）

<ul>
  <a routerLink="/kaltim" routerLinkActive="active">
    <li>
      <img src="assets/news.svg" alt="news"><span>B e r i t a</span>
    </li>
  </a>
  <a [routerLink]="['/kaltim', { outlets: {'kaltim_content':['about']} }]" routerLinkActive="active">
    <li>
      <img src="assets/about us.svg" alt="about us"><span>T e n t a n g<br>K a m i</span>
    </li>
  </a>
  <a [routerLink]="['/kaltim', { outlets: {'kaltim_content':['contact'], 'contact_content':['contact']} }]" routerLinkActive="active">
    <li>
      <img src="assets/contact.svg" alt="contact"><span>K o n t a k</span>
    </li>
  </a>
  </ul>
  <a routerLink="" routerLinkActive="active" class="start_page">
    <img src="assets/start.svg" alt="start">H A L A M A N<br>U T A M A
  </a>

contact.component.html （ KaltimContactComponent ）

<router-outlet name="contact_content"></router-outlet>

APP-routing.module.ts

const routes: Routes = [
  { path: '', component: StartComponent, pathMatch: 'full'},
  { path: 'kalteng', component: KaltengComponent, children: [
    { path: 'contact', component: KaltengContactComponent, outlet: 'kalteng_content' },
    { path: 'contact', component: ContactFormComponent, outlet: 'contact_content' },
    { path: 'about', component: KaltengAboutComponent, outlet: 'kalteng_content', pathMatch: 'full' },
    { path: '', component: KaltengMenubarComponent, outlet: 'kalteng_menubar'},
    { path: '', component: KaltengHomeComponent, outlet: 'kalteng_content', pathMatch: 'full'},
  ] },
  { path: 'kaltim', component: KaltimComponent, children: [
    { path: 'contact', component: KaltimContactComponent, outlet: 'kaltim_content' },
    { path: 'contact', component: ContactFormComponent, outlet: 'contact_content' },
    { path: 'about', component: KaltimAboutComponent, outlet: 'kaltim_content' },
    { path: '', component: KaltimMenubarComponent, outlet: 'kaltim_menubar'},
    { path: '', component: KaltimHomeComponent, outlet: 'kaltim_content', pathMatch: 'full'},
  ] },
  { path: '', redirectTo: 'start', pathMatch: 'full'},
  { path: '**', component: PageNotFoundComponent }
];

start.component.html （ StartComponent ）

<a routerLink="/kaltim" routerLinkActive="active" class="main"></a>
<a routerLink="/kalteng" routerLinkActive="active" class="main"></a>

kaltim.component.html （ KaltimComponent ）

<main>
  <router-outlet name="kaltim_menubar"></router-outlet>
  <router-outlet name="kaltim_content"></router-outlet>
</main>

contact-form.component.html （ ContactFormComponent ）

<!-- Usual Forms -->
<label>...</label>
<input>...</input>

Answer 1

应该将<app-contact-form>（ContactFormComponent的选择器）放在contact.component.html内，而不是使用路由。

Angular 4 - 儿童路线使整个出口空白

1 个答案: