Question

我开发了此应用（http://www.anelmad.com），并试图在提交（按Enter或单击按钮）后将信息显示（单词的字典定义）重定向到另一页面。

重定向有效，但页面内容不遵循。

在home.component.html中：

<form #myForm>
     (...)

    <input type="text" class="form-control" #elem 
    (keyup)="onNameKeyUp(elem.value)"
    [ngModelOptions]="{standalone: true}"
    [(ngModel)]="latinButton"
    (focus)="onNameKeyUp(elem.value)"
    placeholder="Enter"/>

    <span class="input-group-append">
        <button class="btn btn-outline-secondary" type="submit" 
    (click)="getWordList()">
            <i class="fa fa-search"></i>
        </button>
      </span>

在此表单之后，我添加了：

 <router-outlet></router-outlet>

在home.component.ts内部，我添加了（this.router.navigate），并将新页面作为参数：

  getWordList(){
  this.router.navigate(['/words']);
  this.webservice.getWords(this.spelling, this.selected)
  .subscribe((res: Array<Word>)=> {
  (...)

在app.module中：

const myRoutes: Routes=[
  {path: 'words', component: WordsComponent},
  {path: 'about', component: AboutComponent},
  {path: 'home', component: HomeComponent},
  {path: '', redirectTo: '/home', pathMatch:'full'},
  {path: '**', redirectTo: '/home', pathMatch:'full'

]

如何将信息传递给从形式显示到新页面（words.component.html）？

Answer 1

有很多方法可以将数据从一个组件传递到另一个路由组件：

构建服务：在第一个组件中，将数据设置到服务中。从第二个组件中，从服务中读取数据。由于Angular服务是单例服务（当向root注入器注册服务时），因此它在所有组件之间共享。

我有一个正在工作的堆叠闪电战，在这里演示：https://stackblitz.com/edit/angular-simpleservice-deborahk

该示例使用一个简单的input元素，但是您可以将其扩展为包括所有表单数据。

使用路径参数：如果只需要传递一个或几个项目，则可以使用路径参数。 Angular提供了必需，可选和查询参数，可用于在从一个组件到另一个组件的路线上传递数据。
新状态属性：使用新的Angular v7.2功能，该功能允许在路线之间传递状态。有关此最后一个选项的更多信息，请参见以下链接：https://netbasal.com/set-state-object-when-navigating-in-angular-7-2-b87c5b977bb

Angular：提交后如何重定向到另一个页面

1 个答案: