Angular：提交后如何重定向到另一个页面 [英] Angular: How to redirect into another page upon submit

问题描述

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

I developed this app (http://www.anelmad.com) and I am trying to redirect the display of information (dictionary definitions of words) upon submit (Enter or button click) into another page.

重定向有效，但页面内容不跟随。

The redirection works but the content of the page does not follow.

在home.component.html中：

in 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>

在此表单之后，我添加：

After this form, I added:

 <router-outlet></router-outlet>

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

Inside home.component.ts, I added (this.router.navigate) with the new page as an argument:

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

在应用程序模块中：

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）？

How do I pass the information to be displayed from the form into the new page (words.component.html)?

推荐答案

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

There are numerous ways to pass data from one component to another routed component:

• 构建服务：从第一个组件中，将数据设置为该服务。从第二个组件中，读取该服务中的数据。由于Angular服务是单例（当serv ice已在 root 注入器中注册），它在所有组件之间共享。

• Build a service: From the first component, set the data into the service. From the second component, read the data from the service. Since an Angular service is a singleton (when the service is registered with the root injector), it is shared between all of the components.

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

I have a working stackblitz demonstrating this here: https://stackblitz.com/edit/angular-simpleservice-deborahk

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

The example uses a simple input element, but you could expand it to include all of the form data.

• 使用路径参数：如果只需要传递一个或几个项目，则可以使用路径参数。 Angular提供了必需的，可选的和查询的参数，可用于在从一个组件到另一个组件的路线上传递数据。

• Use route parameters: If you just need to pass a single item or a few items, you can use route parameters. Angular provides required, optional, and query parameters that can be used to pass data on the route from one component to another.

New State属性：使用新的Angular v7.2功能允许在路由之间传递状态。有关此最后一个选项的更多信息，请参见此链接： https://netbasal.com/set-state-object-when-navigating-in-angular-7-2-b87c5b977bb

New State property: Use the new Angular v7.2 feature that allows passing state between routes. See this link for more information about this last option: https://netbasal.com/set-state-object-when-navigating-in-angular-7-2-b87c5b977bb

这篇关于Angular：提交后如何重定向到另一个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！