Angular 如何确保在route params订阅收到值后创建视图？

如何确保订阅收到值后呈现

视图

。单击

MyComponent_1

中的

Edit

按钮，角度路由到

MyComponent_2

<代码>MyComponent_2视图有一个表单，其值是路由参数订阅所必需的。如何确保在params subscription收到值后创建视图/表单

我使用了两条语句语句1，语句2。哪个更好？或者你会建议其他方法吗

MyComponent_1.ts

  onEditRecipe() {
    this.router.navigate(['edit'], {relativeTo: this.route});
    // routes to MyComponent_2
  }

MyComponent_2.ts

ngOnInit() {
    this.route.params
      .subscribe(
        (params: Params) => {
          this.id = +params['id'];

          this.formInit(); // form inti statement 1
          setTimeout(()=>{ alert("Hello"); this.formInit();}, 15000); // form inti statement 2
          
        }

      );
  }
 private formInit(){
     this.myform = new FormGroup(...//assigning form controls//..);
 }

MyComponent_2.html

<form [formGroup]="myform"> <!-- ... form controls ... --> </form>

---

使用Angular，您可以实现解析器。此类将在重定向到某个路由时调用，并在创建组件之前运行。要使用它，您只需创建一个实现Resolve的新类。就像上面的例子：

import { Injectable } from '@angular/core';
import { Resolve, RouterStateSnapshot, ActivatedRouteSnapshot, ActivatedRoute, Router } from '@angular/router';

import { SomeService } from 'src/app/service/Some.service.ts';

@Injectable({
  providedIn: 'root'
})

export class ExampleResolve implements Resolve<any> {

  constructor(
    private someService: SomeService,
    private router:Router,
  ){  }
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    let id = route.params.id;
    return this.someService.getSomethingById(id);
  }

}

您的组件将在解析器完成其工作后构造。解析程序提供的数据将添加到路由的“数据”属性中。要访问它，您可以订阅ActivatedRoute.data并获取信息

export class MyComponentComponent implements OnInit {
     something: Something;

constructor(
    private fb: FormBuilder,
    private activatedRoute: ActivatedRoute,
    private router: Router,
  ) {}

  ngOnInit(): void {
    this.dataRelease = this.activatedRoute.data
      .subscribe((data) => {
        this.something = data.something;
      })
      .add(() => {
        this.dataRelease.unsubscribe();
      });
  }
}

---

然后在渲染视图之前加载数据。希望这将对您有所帮助。

使用Angular，您可以实现解析器。此类将在重定向到某个路由时调用，并在创建组件之前运行。要使用它，您只需创建一个实现Resolve的新类。就像上面的例子：

import { Injectable } from '@angular/core';
import { Resolve, RouterStateSnapshot, ActivatedRouteSnapshot, ActivatedRoute, Router } from '@angular/router';

import { SomeService } from 'src/app/service/Some.service.ts';

@Injectable({
  providedIn: 'root'
})

export class ExampleResolve implements Resolve<any> {

  constructor(
    private someService: SomeService,
    private router:Router,
  ){  }
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    let id = route.params.id;
    return this.someService.getSomethingById(id);
  }

}

您的组件将在解析器完成其工作后构造。解析程序提供的数据将添加到路由的“数据”属性中。要访问它，您可以订阅ActivatedRoute.data并获取信息

export class MyComponentComponent implements OnInit {
     something: Something;

constructor(
    private fb: FormBuilder,
    private activatedRoute: ActivatedRoute,
    private router: Router,
  ) {}

  ngOnInit(): void {
    this.dataRelease = this.activatedRoute.data
      .subscribe((data) => {
        this.something = data.something;
      })
      .add(() => {
        this.dataRelease.unsubscribe();
      });
  }
}

然后在渲染视图之前加载数据。希望这能对你有所帮助