如何使用路由在 Angular 应用程序的组件中导航？答案

【问题标题】：How do I use routes to navigate within the component of the Angular app?如何使用路由在 Angular 应用程序的组件中导航？
【发布时间】：2020-11-04 20:43:10
【问题描述】：

Angular 可以用来在 Angular 组件的不同元素之间导航吗？例如，如果有一个关于我们的页面，并且我有一个阅读更多按钮，这样当用户点击阅读更多按钮时，他应该被导航到存在于同一个 about-us 中的阅读更多部分组件（假设该部分位于页面底部）。

这可能吗？

如果是，任何人都可以帮助提供一些演示或拉取请求参考或任何材料。我在 Angular 文档部分没有找到任何具体的东西。另外，我对这个 Angular 东西很陌生，只是想弄清楚如何实现这一点。我认为这与路径和路由器模块有关。但是，我很困惑如何做到这一点。

我正在使用 Angular 9

【问题讨论】：

你想在点击时向上和向下导航到页面中的特定位置（通过自动滚动）
嗨@shashanksharma 是的，我正在尝试实现用户单击他应该被带到同一组件的选定部分的按钮的功能。谢谢

标签： angular angular-ui-router frontend mean-stack

【解决方案1】：

您可以使用 ViewChild - scrollIntoView 来实现。

请在下面找到一个示例：

<div #div1 id="div1">
  This is div 1
</div>

<div #div2 id="div2">
  This is div 2
</div>

<button (click)="goToDiv1()">Go to Div 1</button>
<button (click)="goToDiv2()">Go to Div 2</button>

然后在你的 ts 文件中，定义函数 goToDiv1 和 goToDiv2 如下：

@Component({
    selector: 'my-app',
    template: `template.html        `
})
export class AppComponent {
    @ViewChild('div1') public div1:ElementRef;
    @ViewChild('div2') public div2:ElementRef;

    goToDiv1() {
            this.div1.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'start' });
    }
   goToDiv2(){
        setImmediate(() => {
            this.div2.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'start' });
        });
    }
}

希望这符合您的要求。

【讨论】：

您可以通过 routerlink 或通过路由器使用片段 <a [routerLink]="['currentpath']" fragment="div1">Jump to div1</a>，在您的班级 this.router.navigate( ['/whatever' ], {fragment: 'div1'}) 编辑：此评论是在问题中，抱歉:)
您好，当我尝试运行您的代码时，它说找不到 SetImmediate。是我从任何图书馆导入它吗？感谢您的帮助先生和宝贵的时间。 :D

【解决方案2】：

我认为你可以通过不同的形式来做到这一点：

使用滚动工具（有一些相关技术）或 fragments 在同一页面内移动。
构建嵌套路由并将组件拆分为具有不同组件的模块。
使用类似 tabs 的东西可以模拟同一页面内的导航。
更基本的方式，使用一些 vars 来控制 ng-if 你想看的部分。

我认为您找不到任何东西，因为您更像是可以构建应用程序而不是某些特定的角度行为。

【讨论】：