我怎样才能重新渲染这个角度分量？

Question

我有两个组件。标题和搜索表单。标题为您提供了一个用于搜索食谱的表单。当您提交表单时，您将被重定向到显示搜索结果的搜索页面。此功能有效。但是，当我在搜索页面上时，我想提交另一个搜索（从标题）。搜索页面不会重新呈现和更新以显示新的搜索结果。

header.component.ts

export class HeaderComponent {

  constructor(private router: Router) { }

  query!: any;

  startSearch() {
   this.query = ((document.getElementById('form-control me-2') as 
      HTMLInputElement).value);
   console.log("Query:", this.query);
   this.router.navigate(['/search', this.query])
  }
}

header.component.ts

<div class="nav-overlay uk-navbar-left uk-flex-1" hidden>
        <div class="uk-navbar-item uk-width-expand">
            <form class="uk-search uk-search-large uk-width-1-1" (ngSubmit)="startSearch();" >
                <input id="form-control me-2" class="uk-search-input" type="search" placeholder="Search..." autofocus>
            </form>
        </div>
        <a class="uk-navbar-toggle" uk-close="ratio:2" uk-toggle="target: .nav-overlay; animation: uk-animation-fade" href="#"></a>
    </div>

search.component.ts

export class SearchComponent implements OnInit, OnDestroy{
  searchSub!: Subscription;
  errorMessage: string = '';
  
    constructor(
        private searchService: SearchService,
        private route: ActivatedRoute
    ) { }

    results!: ISearchResults;
    query!: any;

    ngOnInit(): void {
        this.route.paramMap.subscribe(params => {
            console.log(params);
            this.query = params.get('query');
        });
        this.searchSub = this.searchService
            .search(this.query)
            .subscribe({
                next: results => {
                    this.results = results,
                        console.log("Search query : ", this.query);
                }
            }
        );
    }

    ngOnDestroy() {
        this.searchSub.unsubscribe();
    }
}

Answer 1

此处对此进行了解答。基本上 ngOnInit() 没有被调用，因为组件已经初始化。
将搜索放入 paramMap 订阅中，然后当路由参数更改时，您的结果就会更新。

ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
        console.log(params);
        this.query = params.get('query');
        this.searchService
        .search(this.query)
        .subscribe({
            next: results => {
                this.results = results,
                    console.log("Search query : ", this.query);
            }
        });
    
    });
    
}