angular - 如何通过 Angular 代码输入导航到组件

Question

我有一个组件，它通过从另一个组件激活来接收输入，我需要通过代码从一个组件导航到另一个组件，并在导航中发送输入值。你是怎么做到的？

我知道如何从一个组件导航到另一个组件，但我不知道如何向其发送输入值。我将非常感谢您的帮助!谢谢。

这是我的 1 个组件:

 export class HostPersonalAreaComponent implements OnInit {

  constructor() { }
  panelOpenState = false;
  @Input() suggestion: Suggestion;

  ngOnInit() {
  console.log(this.suggestion);
   }
}

这是导航到上面编写的组件的代码:

    this.router.navigate(['/host-personal-area']);

问题是我没有发送输入值。有谁知道如何发送吗？

Answer 1

当父组件与其子组件通信时，输入非常方便。就您而言，您想要依赖其他模式。

服务

保存您想要从一个 View 到另一个 View 使用的变量的有状态服务可能是您想要尝试的最可靠的模式。

生成一个服务(使用 cli)，并使用其公共(public)访问器向其添加私有(private)behaviorSubject:

@Injectable({
  providedIn: 'root',
})
export class MySingletonService {
  private suggestion: BehaviorSubject<Suggestion> = new BehaviorSubject(null);

  onSuggestionChange(): Observable<Suggestion> {
    return this.suggestion.asObservable();
  }
  
  setSuggestion(nextSuggestion: Suggestion): void {
    this.suggestion.next(nextSuggestion);
  }
  
  resetSuggestion(): void {
    this.suggestion.next(null);
  }
}

然后，您可以在第一个组件中设置建议，触发导航，然后在第二个组件中访问它。

export class MyFirstComponent {
  constructor(
    private myService: MyService,
    private router: Router
  ) {}
  
  setSuggestion(suggestion: Suggestion): void {
    this.myService.setSuggestion(suggestion);
    this.router.navigate(['to', 'second', 'component']);
  }
}

export class MySecondComponent {
  suggestion: Suggestion;
 
  constructor(private myService: MyService) {}
  
  ngOnInit(): void {
    this.myService.onSuggestionChange().subscribe(suggestion => this.suggestion = suggestion);
  }

}

查询参数

传递数据的第二种方式是使用 url。您可以使用 queryParams 参数向路由添加参数:

this.router.navigate(['url'], { queryParams: { suggestion }});

然后通过ActivatedRoute从第二个组件进入:

this.route.queryParams.subscribe((params) => { this.suggestion = params.get('suggestion');}