angular-module 相关问题

我有一个 HomeComponent，我想在 / 路线上显示 HomeComponent.hmtl 社区帖子我有一个 HomeComponent，我想在 / 路线上显示 HomeComponent.hmtl <header> <div> <h1>CommunityPost</h1> </div> <button mat-raised-button color="primary" (click)="onLogout()">Log Out</button> </header> <mat-divider></mat-divider> <main> <nav mat-tab-nav-bar [tabPanel]="tabPanel"> <a mat-tab-link routerLink="/users" (click)="activeLink = '/users'" [active]="activeLink == '/users'" > COMMUNITY</a> <a mat-tab-link routerLink="/posts" (click)="activeLink = '/posts'" [active]="activeLink == '/posts'" > POSTS </a> </nav> <mat-tab-nav-panel #tabPanel> <router-outlet></router-outlet> </mat-tab-nav-panel> </main> 在路由器插座中我想向孩子们展示路线应用程序路线 const routes: Routes = [ `enter code here`{path: '', component: HomeComponent, canActivate: [guardGuard], children:[ {path: 'posts', loadChildren: () => import('./posts/posts.module').then(m => m.PostsModule)}, {path: 'users', loadChildren: () => import('./user/user.module').then(m => m.UserModule)}, {path: '', redirectTo: 'users', pathMatch: 'full'}, ]}, {path: 'login', component: LoginComponent}, {path: '**', component: NotFoundComponent}, ]; 用户路线 const routes: Routes = [ {path: '', component: UsersListComponent}, {path: 'users/:id', component: UserDetailComponent}, ]; 这显示/路由 UserListComponent 而不是 HomeComponent 以及嵌套在其中的 UserList 编辑 HomeComponent.ts import { Component } from '@angular/core'; import { NavigationEnd, Router } from '@angular/router'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrl: './home.component.css' }) export class HomeComponent { activeLink: string constructor(private router: Router){ this.router.events.subscribe((data: NavigationEnd)=> { if(data.url !== undefined){ this.activeLink=data.url } }) } onLogout(){ if(window.confirm('You are logging out. Are you sure?')){ localStorage.removeItem('auth') window.location.reload() } } } 如果我转到 localhost/ ，它将仅显示 UserListComponent ，但是当我转到 localhost/user 时，它将显示 HomeComponent 和嵌套的 UsersListComponent ，因为它应该是实际上共享的代码没有任何重大问题，我认为问题可能出在根组件级别，请检查下面的 stackblitz 以供参考，如果仍然遇到问题，请分享回 stackblitz 并复制问题和详细信息需要修复什么！主页组件！ import { CommonModule } from '@angular/common'; import { Component, OnInit } from '@angular/core'; import { RouterModule } from '@angular/router'; import { MatTabsModule } from '@angular/material/tabs'; import { MatDividerModule } from '@angular/material/divider'; @Component({ selector: 'app-home', template: `<header> <div> <h1>CommunityPost</h1> </div> <button mat-raised-button color="primary" (click)="onLogout()">Log Out</button> </header> <mat-divider></mat-divider> <main> <nav mat-tab-nav-bar [tabPanel]="tabPanel"> <a mat-tab-link routerLink="/users" (click)="activeLink = '/users'" [active]="activeLink == '/users'" > COMMUNITY</a> <a mat-tab-link routerLink="/posts" (click)="activeLink = '/posts'" [active]="activeLink == '/posts'" > POSTS </a> </nav> <mat-tab-nav-panel #tabPanel> <router-outlet></router-outlet> </mat-tab-nav-panel> </main>`, standalone: true, imports: [RouterModule, CommonModule, MatTabsModule, MatDividerModule], }) export class HomeComponent implements OnInit { activeLink = ''; constructor() {} ngOnInit() {} onLogout() {} } Stackblitz Demo

angular angular-routing angular-module

回答 1 投票 0

有没有办法在 Angular StandAlone 的所有模块中提供通用模块？

在每个组件中，我都必须导入此 CommonModule 才能使用 NgIf 等指令。我想要一种在我的所有模块中注入这个模块的方法。 @成分（{ 选择器：“应用程序注册”，...

angular module angular-module angular-standalone-components

回答 1 投票 0

从 Angular 中的对等模块覆盖提供者

我有2个库模块，其定义如下： @NgModule({ 提供者：[ 某物， ], ... }) 导出类 LibAModule { } @NgModule({ 提供者：[ {

angular angular-module angular-providers

回答 1 投票 0

如何在 Angular 微前端中使用共享服务与模块联合插件进行数据通信？

我在 Angular 项目中面临挑战，其中我有一个在端口 4500 上运行的基本应用程序，并且我导入了一个远程应用程序。在远程应用程序中，我使用主题创建了一个共享服务并拥有

micro-frontend angular-module angular-module-federation

回答 1 投票 0

何时在 Angular 14 中使用独立组件或模块？

我想知道什么时候应该使用独立组件以及什么时候应该创建新模块。既然它是 Angular 中引入的新概念，那么使用它们的标准是什么？我创建了一个...

angular typescript components angular-module

回答 2 投票 0

Angular 11 - mat-grid-list 在一个组件中无法识别，但在其他几个组件中工作

我在我的大型 Angular 项目中添加了一个新组件。我使用该组件来布局页面。奇怪的是新组件会产生错误。我处理过这类问题...

angular angular-material angular-components angular-module

回答 2 投票 0

Angular Cypress 组件测试错误：初始化前无法访问“<Component>”

我正在尝试使用 Cypress 运行我的 Angular 组件的规范。但我在 Cypress 日志中收到以下错误：以下错误源自您的测试代码，而不是来自 Cypress。 > 不能

angular cypress angular-module cypress-component-test-runner e2e

回答 1 投票 0

如何重用 Angular 测试文件中的所有导入

假设我有一个简单的模块 AppModule，它有许多导入、声明和提供者。现在我想为位于该模块声明中的组件 ListComponent 编写一个测试...

angular angular-components angular-module angular-test

回答 3 投票 0

Angular 共享组件模块无法在延迟加载模块中工作

我在 SharedModule 中添加了一个组件，我需要在延迟加载模块中使用它，但是从共享模块导出组件并在延迟加载模块中导入 SharedModule 后发生事件，我...

angular angular-components angular-module angular-lazyloading

回答 1 投票 0

Angular 16 模块中未使用的组件是否已从捆绑包中删除（tree shake）？

我有一个 SharedModule，我将需要包含在多个模块中的每个组件都填充在那里。但并非每个模块都需要从 SharedModule 导出的每个组件。如果我...

angular angular-module tree-shaking

回答 1 投票 0

在 Angular 中预加载功能模块有什么缺点吗？

我刚刚了解了如何在 Angular 中预加载功能模块，方法是在根 module.ts 文件中导入的 RootModules.forChild() 方法中添加这一行：预加载策略：PreloadAllMo...

angular angular-module ng-modules

回答 1 投票 0

ngmodule 不是 ngmoduletype 的子类型

我使用 Angular 9，我想做延迟加载，我做应用程序路由 { 路径: '', loadChildren: () => import("./components/login/login.module")//.then(m => // m.LoginModule) } 和船尾...

angular angular-routing angular9 angular-module

回答 5 投票 0

angular-module 相关问题

最新问题