Question

我有两条路线。从一条路线中，我需要通过单击按钮来获取另一条路线的div元素。我用id(#)进行了类似的操作，就像我们在HTML中所做的那样，但是没有成功。您能建议在Angular中做一个最好的方法吗？

路线一（/ route1）

<div class="div1">
<p>hi</p>
</div>

<div class="div2">
<p>hello</p>
</div>

路线2（/ route2）

<button (click)="getDiv()"></button>

TS

getDiv()
{
      this.router.navigate(['/route1']); // I need to get div1 of route1 here
}

Answer 1

如果您使用的是Angular 6.1+版本，则可以手动启用anchorScrolling

app.module.ts

@NgModule({
  imports:      [ BrowserModule, FormsModule, RouterModule.forRoot(route,{
       anchorScrolling: 'enabled'
  }) ],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ]
})

然后在您要滚动到的div上指定ID

router-a.component.ts

<div class="div1"  id="div1">
<p>Div1</p>
</div>

<div class="div2" id="div2" >
<p>Div2</p>
</div>

Finall使用片段导航到当前div位置

getDiv() {
    this.router.navigate(['/route2'], { fragment: 'div2' });
  }

示例：https://stackblitz.com/edit/angular-h7bvyu

Answer 2

您的html应该位于其他模块中，并且应该配置路由。在html中使用以下代码将进行相同的路由。

<button [routerLink]="['/route1']">View All</button>

您的路由器应配置为根。

转到特定路线的div元素

2 个答案: