Question

我的应用程序无法导航到新页面，因此通过谷歌搜索，我发现我应该将RouterModule（声明RouterLink的位置）导入使用此模板的模块中。

我得到一个错误：@NgModule类上有两个不兼容的装饰器

错误NgModule'AppModule'的声明中列出了类'ShoppingCartComponent'，但不是指令，组件或管道。从NgModule的声明中将其删除，或添加适当的Angular装饰器。

在shopping-cart.component.ts中：

import { NgModule } from '@angular/core';
import { Router } from '@angular/router';
import {ActivatedRoute} from '@angular/router';

@NgModule(
{
   imports:[
       RouterModule
   ]
}
)
public checkOut(): void {

this.router.navigate(['/check-out'], {relativeTo: this.route});

//this.router.navigateByUrl('/check-out/check-out');
}

在app-routing.module.ts

import { Routes, RouterModule } from '@angular/router';
import { CheckOutComponent } from './check-out/check-out.component';

const routes: Routes = [
{
   path: 'check-out',
   component: CheckOutComponent
   }
];

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


export class AppRoutingModule { }

在app.module.ts中

import { AppRoutingModule } from './app-routing.module';
import { CheckOutComponent } from './check-out/check-out.component';
import { RouterModule } from '@angular/router';


@NgModule({
  declarations: [
    CheckOutComponent 
  ],
  imports: [
     RouterModule,
     AppRoutingModule,
  ]
})
export class AppModule { }


constructor(public router: Router, private route: ActivatedRoute){}

shopping-cart.component.html

<form>

<a [routerLink]="'/check-out'"><button (click)="checkOut()" type="submit"> Check Out</button></a>

</form>

Answer 1

ShoppingCartComponent不是组件，它被装饰为模块。您不能在另一个模块的声明数组中列出模块。您必须将模块导入导入数组。

角度应用程序是单页应用程序，因此所有组件都将加载到主路由器插座中。现在，您当然可以拥有多个嵌套的路由器出口。通常，您应该将应用程序组件用作应用程序的镶边（主菜单，徽标，登出等）所在的应用程序的顶层。

然后，您的购物车组件应放在其自己的模块中。在ShoppingCartModule中，您应该导入一个新的ShoppingCartRoutingModule。您可以在ShoppingCartComponent中放置一个额外的路由器插座，然后将子路由添加到ShoppingCartComponent。无论如何，所有组件最终都将成为主路由器出口的一部分。

这是一个StackBlitz项目的链接，该项目显示了如何使用专用模块和路由器模块针对应用程序的不同部分来重构应用程序。

https://stackblitz.com/edit/angular-ivy-bbundf?file=src/app/app.module.ts

如果您导航到https://angular-ivy-bbundf.stackblitz.io/cart，将会看到ShoppingCartComponent加载在主路由器出口中。您还将在ShoppingCartComponent中看到它也有自己的路由器出口。

希望这会有所帮助。

routerLink无法导航到新页面

1 个答案: