我正在尝试启用关于我们按钮。我已经添加了路径，我已经将路由器链接添加到按钮的容器 div。我错过了什么？答案

【问题标题】：I am trying to enable the about us button. I have added the path, I have added router link to the container div of the button. What am I missing?我正在尝试启用关于我们按钮。我已经添加了路径，我已经将路由器链接添加到按钮的容器 div。我错过了什么？
【发布时间】：2023-02-24 14:24:34
【问题描述】：

首先是我的应用程序路由模块中的路径然后是主页组件接下来是应用程序组件最后是用于创建按钮的 html

app.routing.module.ts 中的路径



     {
        path: 'about-us',
        pathMatch: 'full',
        data: { type: '', breadcrumb: '' },
        component: AboutUsComponent,
      },

home.component.ts 中的默认构造函数和 ngOnInit 构造函数中的唯一路由器变量



    import { Component, OnInit } from '@angular/core';
    import {Router} from '@angular/router';

    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.scss'],
    })
    export class HomeComponent implements OnInit {
      constructor(private router : Router) {}

      ngOnInit(): void {}
    }

仅在 app.module.ts 中默认导入



        import { NgModule } from '@angular/core';
        import { BrowserModule } from '@angular/platform-browser';
    
        import { AppRoutingModule } from './app-routing.module';
        import { AppComponent } from './app.component';
        import { HomeComponent } from './home/home.component';
        import { AboutUsComponent } from './about-us/about-us.component';
        import { LoginComponent } from './login/login.component';
        import { LogoutComponent } from './logout/logout.component';
        import { SocialMediaComponent } from './social-media/social-media.component';
        import { LoggedInHomeComponent } from './logged-in-home/logged-in-home.component';
        import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
    
        @NgModule({
          declarations: [
            AppComponent,
            HomeComponent,
            AboutUsComponent,
            LoginComponent,
            LogoutComponent,
            SocialMediaComponent,
            LoggedInHomeComponent,
            PageNotFoundComponent
          ],
          imports: [
            BrowserModule,
            AppRoutingModule
          ],
          providers: [],
          bootstrap: [AppComponent]
        })
        export class AppModule { }
    
        




 **button creation code home.component.html**



        <div class="about-us">
              <button class="button-box" type="button">
                <a [routerLink]="'about-us'" [routerLinkActive]="['active']">about-us</a>
              </button>
            </div>

*我的目标是：

我。单击重定向到关于我们的组件
二.当 url 中提到路径时打开关于我们组件
但两者都不起作用！*

【问题讨论】：

[routerLink]="'about-us'" 是错误的语法 IIRC。做[routerLink]="/about-us"或[routerLink]="['about-us']"

标签： javascript html angular angularjs typescript

【解决方案1】：

您缺少从 import { RouterModule } from '@angular/router'; 导入 RouterModule

【讨论】：

在 app.routing.module.ts 中，添加并导出了 RouterModule。 @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule], }) export class AppRoutingModule {} 还需要在home.component中添加RouterModule吗？
是的，在 home 组件中导入 RouterModule。

【解决方案2】：

希望你在 AppRoutingModule 中包含 RoutingModule。如果是这样，请尝试以下代码

<a [routerLink]="['about-us']" [routerLinkActive]="['active']">about-us</a>

【讨论】：

我已经在使用 routerLinkActive 但这似乎不起作用。单击时，地址栏中仅显示要重定向到的 url，其他没有任何变化。
试试[routerLink]="['/about-us']"

【解决方案3】：

你有没有在里面添加<router-outlet> app.component.html 文件。仅添加上面的标记并从 app.component.html 中删除所有其他内容（如果已添加）

试试这个让我知道

【讨论】：