使用Angular（路由器）进行锚定

Question

我正在尝试使用angular与主播合作，我已经做了我的研究，但没有成功，所以我正在联系你们。

我有 3 个组件 {导航栏组件， 红色组件， 蓝色组件} 导航栏组件有 2 个锚点。我希望当我单击其中一个时，它实际上会将我引导到正确的组件

导航栏组件.ts

  @Component({
  selector: 'navbar',
  template: `<ul>
    <li><a href="#red">Red</a></li>
    <li><a href="#blue">Blue</a></li>
  </ul>`
})
export class NavbarComponent {
  constructor() { }
}

红色. component.ts

@Component({
  selector: 'red',
  template: '<div id="red">Red Component</div>'
})
export class RedComponent {
  constructor() { }
}

blue.component.ts

@Component({
  selector: 'blue',
  template: '<div id="blue">Blue Component</div>'
})
export class BlueComponent {
  constructor() { }
}

app.component.html

<navbar></navbar>
<red></red>
<blue></blue>

应用程序模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } '@angular/router'; 
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { RedComponent } from './red/red.component';
import { BlueComponent } from './blue/blue.component';

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    RedComponent
    BlueComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

要超链接到组件的模板，您需要分配一个< code>id属性。您可以通过使用< code>@HostBinding -

@Component({
  selector: 'red',
  template: '<div id="red">Red Component</div>'
})
export class RedComponent {
  @HostBinding('id') id = 'red';
  constructor() { }
}

@Component({
  selector: 'blue',
  template: '<div id="blue">Blue Component</div>'
})
export class BlueComponent {
  @HostBinding('id') id = 'red';
  constructor() { }
}

Refer @HostBinding和@HostListener:它们是做什么的，有什么用？了解更多详情