将对象传递给路由器中的另一个组件答案

【问题标题】：Passing an object to another component in router将对象传递给路由器中的另一个组件
【发布时间】：2020-06-04 16:31:37
【问题描述】：

我有一个像这样的 todoDetail 组件：

<mat-card class="todos" [class.done]="todo.done === true">

  <h3>
    <input (change) = "done(todo.id)" [checked]="todo.done" type="checkbox"/>
    <a [title]="todo.name + ' details'" >
      {{ todo.name }}
    </a>
    <button (click)="delete(todo.id)" class="del" mat-mini-fab color="warn" aria-label="Delete todo">
      x
    </button>
    <button routerLink="/editTodo" class="edit" mat-mini-fab color="accent" aria-label="Edit todo">
      Edit
    </button>
  </h3>
  <p>{{todo.urgency}}</p>
  <p *ngIf="todo.description">
    Description: {{ todo.description }}
  </p>
</mat-card>
<br>

我想要的是当我点击编辑按钮时，它会带我进入编辑待办事项屏幕，这是添加待办事项的屏幕，但已填充待办事项的值。我指定了以下路线：

{ path: 'addTodo', component: AddTodoComponent },
{ path: 'editTodo', component: AddTodoComponent },

当我点击编辑时，我如何将待办事项数据传递给该组件？我是 Angular 的新手，所以我希望这是有道理的。谢谢！

【问题讨论】：

您是否考虑过使用路由参数？ angular.io/guide/router#route-parameters
如果您询问 route.state 检查：stackoverflow.com/questions/58886303/…

标签： angular angular-ui-router

【解决方案1】：

您可以将路由绑定到控制器中的函数，并向接收者发送额外的可选参数。试试下面的

app.component.html

<h3>
  <input [(ngModel)]="todo.done" type="checkbox"/>
  <a [title]="todo.name + ' details'" >
    {{ todo.name }}
  </a>
  <button routerLink="/dashboard">
    Cancel edit
  </button>
  <button (mouseup)="gotoEdit()">        <!-- binding to a function instead of directly routing here -->
    Edit todo
  </button>
</h3>
<p>Urgency: {{todo.urgency}}</p>
<p *ngIf="todo.description">
  Description: {{ todo.description }}
</p>

<router-outlet></router-outlet>

app.component.ts

import { Router } from '@angular/router';

export class AppComponent  {
  todo = {
    done: true,
    id: '2',
    name: 'Groceries',
    urgency: 'high',
    description: 'Get groceries immediately'
  }

  constructor(private _router: Router) { }

  gotoEdit() {
    this._router.navigate(['/editTodo', {todo: JSON.stringify(this.todo)}]);
  }
}

并使用 Angular ActivatedRoute 在收件人中检索它。

edit-todo.component.ts

import { ActivatedRoute } from '@angular/router';

export class EditTodoComponent implements OnInit {
  todo: any;
  constructor(private _actRoute: ActivatedRoute) { }

  ngOnInit() {
    this.todo = JSON.parse(this._actRoute.snapshot.paramMap.get('todo'));
  }
}

edit-todo.component.html

<ng-container *ngIf="todo">
  Got 'todo' object from parent:
  <pre>{{ todo | json }}</pre>
</ng-container>

这是我用来参考的路由配置

app.module.ts

import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
  { path: '', component: DashboardComponent },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'editTodo', component: EditTodoComponent }
];

@NgModule({
  imports:      [ BrowserModule, FormsModule, RouterModule.forRoot(appRoutes) ],
  ...
})

工作示例：Stackblitz

【讨论】：