次要 Angular6 路由在点击时不执行任何操作。没有错误

Posted 2023-02-23

【中文标题】次要 Angular6 路由在点击时不执行任何操作。没有错误

【英文标题】：Secondary Angular6 route does nothing on click. No error

【发布时间】：2019-01-15 23:52:39

【问题描述】：

以下 sn-ps 是大型应用程序中 angular 6 功能的一部分。***应用程序有一个路由器插座，然后这个功能有它自己的 2 个。单击 comp.html 中的链接应该会加载内联的联系人组件，但它什么都不做。期望来自 ContactComponent 的 html 在名为 popup 的路由器出口之后被注入。没有。也没有错误。

对于这个确切的问题，您可以看到联系人组件是从 Angular tutorial 复制意大利面。不知道我做错了什么。我假设路由有问题，但是当路由不匹配时，我得到一个 404，这很好。

home.html

<a [routerLink]="[ outlets:  popup: ['contact'] ]">Contact</a>
<router-outlet name="popup"></router-outlet>
<router-outlet></router-outlet>

路线

const routes: Routes =
[
  
    path: '',
    component: HomeComponent,
    children: [
      
        path: '',
        component: ListComponent,
      ,
      
        path: 'details/app/:appid',
        component: DetailsComponent,
      ,
      
        path: 'history',
        component: HistoryComponent,
      ,
      
        path: 'contact',
        component: ContactComponent,
        outlet: 'popup',
      
    ]
  
];

ContactComponent.html

<h3>Contact Crisis Center</h3>
<div *ngIf="details">
   details 
</div>
<div>
  <div>
    <label>Message: </label>
  </div>
  <div>
    <textarea [(ngModel)]="message" rows="10" cols="35" [disabled]="sending"></textarea>
  </div>
</div>
<p *ngIf="!sending">
  <button (click)="send()">Send</button>
  <button (click)="cancel()">Cancel</button>
</p>

【参考方案1】：

看起来这是一个延迟加载模块的角度错误。

https://github.com/angular/angular/issues/10981

https://github.com/angular/angular/issues/24657

在第二个链接中，有人建议解决方法。使用他们的建议，我能够让它工作。以下是我创建的用于复制您的问题并应用解决方法的基本设置。

app-routing.module.ts

const routes: Routes = [
  
     path: 'home',
    loadChildren: './home/home.module#HomeModule'
  
];

app.component.ts

<router-outlet></router-outlet>

home-routing.module.ts

const routes: Routes =
[
  
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  ,
  
    path: 'home',
    component: HomeComponent,
    children: [
      
        path: 'history',
        component: HistoryComponent,
      ,
      
        path: 'contact',
        component: ContactComponent,
        outlet: 'popup',
      
    ]
  
];

home.component.html

<div><a [routerLink]="['history']">History</a></div>
<div><a [routerLink]="[ outlets:  popup: ['contact'] ]">Contact</a></div>

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

【讨论】：

这不会生成像 /home/history /home/contact 这样的网址，而不是像原来一样的 /history 和 /contact 吗？

在我的测试中，url 和预期的一样，没有任何改变。

对不起，根据您的说法，“以下 sn-ps 是大型应用程序中 angular 6 功能的一部分”。所以我只是设置 App.Module.Routing 来设置我期望设置更大的应用程序的方式。您的应用程序模块中只能有一个通配符重定向。因此，如果它是一个更大的应用程序，我希望你有一个像 /home/x 这样的基本路由。当然 home 可能是你重定向 home 模块的一个路由，所以你在技术上不需要 /home。但据我所知，我设置 App.Module 的方式与问题无关。如果你希望它是 '' 而不是 'home'，结果应该是..

.. 一样。