无法在angular6中使用href=#id导航到html内部元素

在Angular 6中，无法直接使用href=#id来导航到HTML内部元素，因为Angular使用了单页面应用（SPA）的模式，通过路由来管理不同的组件和页面。如果想要在Angular中实现类似的导航功能，可以通过以下几种方式来实现：

1. 使用锚点导航：在HTML中使用id属性给目标元素命名，然后在导航链接中使用锚点来指定目标元素的id。例如：

<!-- 目标元素 -->
<div id="section1">
  ...
</div>

<!-- 导航链接 -->
<a routerLink="/current-route#section1">跳转到section1</a>

在上述代码中，routerLink指令用于定义路由链接，/current-route表示当前页面的路由路径，#section1表示目标元素的id。

1. 使用滚动插件：在Angular中，你可以使用一些第三方的滚动插件来实现平滑滚动到指定元素的效果。例如，可以使用ngx-page-scroll插件，在导航链接中使用pageScroll指令来实现滚动效果。具体步骤如下：

步骤1：安装ngx-page-scroll插件：

npm install ngx-page-scroll --save

步骤2：导入和配置ngx-page-scroll：

在app.module.ts文件中，导入NgxPageScrollModule并添加到imports数组中：

import { NgxPageScrollModule } from 'ngx-page-scroll';

@NgModule({
  imports: [
    ...
    NgxPageScrollModule,
    ...
  ],
  ...
})
export class AppModule { }

步骤3：使用pageScroll指令：

<!-- 导航链接 -->
<a pageScroll href="#section1">跳转到section1</a>

在上述代码中，pageScroll指令用于将点击事件绑定到滚动效果，href="#section1"表示滚动到具有id="section1"的元素。

1. 使用编程方式实现导航：如果以上方法都不能满足需求，你还可以通过编程方式来实现导航功能。首先，你需要在组件中引入ElementRef和Renderer2类，并使用nativeElement属性访问DOM元素，然后使用scrollIntoView()方法来滚动到目标元素。具体步骤如下：

步骤1：在组件中引入ElementRef和Renderer2：

import { Component, ElementRef, Renderer2 } from '@angular/core';

步骤2：在构造函数中注入ElementRef和Renderer2：

constructor(private elementRef: ElementRef, private renderer: Renderer2) { }

步骤3：在导航链接的点击事件处理程序中调用滚动方法：

scrollToElement() {
  const element = this.elementRef.nativeElement.querySelector('#section1');
  element.scrollIntoView({ behavior: 'smooth' });
}

在上述代码中，#section1表示目标元素的id，scrollIntoView()方法用于平滑滚动到目标元素。

无论选择哪种方式，都可以实现在Angular 6中滚动到HTML内部元素的效果。至于具体选择哪种方式，可以根据项目需求和个人喜好来决定。