使用 Angular（路由器）锚定

Question

我正在尝试使用 Angular 与锚点合作，我已经完成了我的研究，但没有成功，所以我正在与你们联系。

我有 3 个组件 {NavbarComponent, RedComponent, BlueComponent} NavbarComponent 有 2 个锚点。我希望当我点击其中一个时，它实际上会引导我找到正确的组件

navbar.component.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() { }
}

red.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>

app.module.ts

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

要超链接到组件的模板，您需要分配一个id 属性。您可以使用@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() { }
}

更多详情请参考@HostBinding and @HostListener: what do they do and what are they for?