我试图通过按发送路由事件的按钮来清除输入文本。因此，如果我得到特定的路由，但没有参数（见下面屏幕上的绿色按钮），则应清除文本框。如果路线不正确，或正确但带有参数（白色按钮），我将文本框value name$订阅到ActivatedRoute事件（我正在使用路由服务在不相关的组件之间传递数据）。
逻辑，我正在尝试实现：
1.如果路由是“/welcome”或“/products”-继续。
1.如果有参数-忽略、不返回任何内容、不更改输入文本。
1.如果没有参数，则返回空字符串（用“”清除输入）。
简洁的演示应用程序：github.com/sam-klok/AngularPlayRoutes

主要第一个组件（菜单）的HTML：

<input #name type="text" [value]="(name$ | async)" placeholder="name"/>

第2/3个组件的HTML：

<button (click)="btnClear()">Clear input above</button>

来自第一个组件（当前不工作）app.component.ts的代码：

export class AppComponent {
  name$ = this.activateRoute.queryParams.pipe(
    map(params => params['name']),
    map(x => {return x}))

第2/3个组件的代码：

export class WelcomeComponent implements OnInit {
 constructor(private activateRoute: ActivatedRoute, private router: Router){}
  btnClear(){
    // we already on welcome page this should clear text input
    this.router.navigate(['/welcome']);  
  }