angular13路由怎么使用url传参

Question

需求

点击按钮后, 将文本框的值传递到output页面

这是我原先的代码

export class DemandComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
    
  // ...
    
  data!:any;

}

<h3>页面传值</h3>

<input type="text" placeholder="请输入内容" value="" [(ngModel)]="data">
<a routerLink="/demo/output" routerLinkActive="router-link-active" [queryParams]="{id:data}">传递输出页面</a>

output.component.html 如何用插值来获取查询字符串?

<p>output works!</p>

在网上查过, 很多都是写成这样子

import { Router } from '@angular/router';
.
constructor(private router: Router) {}
.
this.router.navigate(['/newscontent'],{
  queryParams:{
    name:'laney',
    id:id
  },
  skipLocationChange: true 
  //可以不写，默认为false,设为true时路由跳转浏览器中的url会保持不变，传入的参数依然有效
});

不是很理解, 为什么要在构造方法里定义ActivatedRoute? 然后在外面获取
不应该是全局的吗?构造方法里定义的模板怎么用{{...}}获取?
我用的是最新版的ts, 不知道是不是版本的问题

Answer 1

不能在class块里面直接调用this.**.

  class D{
      this.getName(); // 错误的
  }

  class {
    a = this.**;
     // 或者
    name(){
        console.log(this.**)
    }
  }