在我的Angular 2路由模板之一(FirstComponent)中,我有一个按钮

first.component.html

<div class="button" click="routeWithData()">Pass data and route</div>

我的目标是:

按钮点击->路由到另一个组件,同时保留数据,而不使用另一个组件作为指令。

这是我试过的…

1号的方法

在同一个视图中,我根据用户交互存储收集相同的数据。

first.component.ts

export class FirstComponent {
     constructor(private _router: Router) { }

     property1: number;
     property2: string;
     property3: TypeXY; // this a class, not a primitive type

    // here some class methods set the properties above

    // DOM events
    routeWithData(){
         // here route
    }
}

通常我会通过

 this._router.navigate(['SecondComponent']);

最终传递数据

 this._router.navigate(['SecondComponent', {p1: this.property1, p2: property2 }]);

而带有参数的链接的定义将是

@RouteConfig([
      // ...
      { path: '/SecondComponent/:p1:p2', name: 'SecondComponent', component: SecondComponent} 
)]

这种方法的问题是,我猜我不能在url中传递复杂的数据(例如property3这样的对象);

2方法

另一种方法是在FirstComponent中包含SecondComponent作为指令。

  <SecondComponent [p3]="property3"></SecondComponent>

然而,我想路由到该组件,不包括它!

第三个方法

我在这里看到的最可行的解决方案是使用一个服务(例如FirstComponentService)来

将数据(_firstComponentService.storeData())存储在FirstComponent的routeWithData()上 在SecondComponent的ngOnInit()中检索数据(_firstComponentService.retrieveData())

虽然这种方法似乎完全可行,但我想知道这是否是实现目标的最简单/最优雅的方法。

一般来说,我想知道我是否错过了在组件之间传递数据的其他潜在方法,特别是在代码量可能较少的情况下


当前回答

默认情况下,我不会使用一个守卫这一个对我来说,这是更多的我可以进入路线或我可以离开它。这不是为了在它们之间共享数据。

如果你想在我们进入路由之前加载数据,只需添加一个解析器,这也是路由器的一部分。

举个非常基本的例子:

解析器

import { Resolve, ActivatedRoute } from "@angular/router";
import { Observable } from "rxjs";
import { Injectable } from "@angular/core";
import { take } from "rxjs/operators";

@Injectable()
export class UserResolver implements Resolve<User> {

    constructor(
        private userService: UserService,
        private route: ActivatedRoute
    ) {}

    resolve(): Observable<firebase.User> {
        return this.route.params.pipe(
            switchMap((params) => this.userService.fetchUser(params.user_id)),
            take(1)
        );
    }
}

发送到路由器:

RouterModule.forChild([
{
    path: "user/:user_id",
    component: MyUserDetailPage,
    resolve: {
        user: UserResolver
    }
  }
}]

获取组件中的数据

ngOnInit() {
    const user: firebase.User = this.activatedRoute.snapshot.data.user;
}

这种方法的缺点是,如果他之前没有得到用户数据,他将首先进入路由,这确保用户的数据已经加载并在组件开始时准备好了,但只要数据已经加载,你就会停留在旧页面上(加载动画)

其他回答

如果你有一个公式集合,它处理了几个ng组件,这些ng组件基本上是建立在类对象的集合/数组上的。10个道具,例如,包括输入值,标称值,至少单位和布尔值…,所以保持页面状态(输入+结果)结束重复很多东西。

因此,我通过使用*ngif来模拟路由,以显示单个页面的相关部分(组件),但从不更改url。

<div *ngIf="visibleComponentA>
... All part of ComponetA 
  ></div>

CpmponetA.html

<div *ngIf="visibleComponentB>
... All part of ComponetB 
  ></div>

CpmponetB.html

这个布尔值将在组件的相关代码中设置:

@Input()visibleComponentA: boolean = true; 

ComponetA.ts

现在在第一页

<div (click)="OnClickNav(visibleComponentA)" >ComponentA</div>
<div (click)="OnClickNav(visibleComponentB)" >ComponentB</div> 

app.component.html

和方法OnClickNav(选定:NavFlags)切换组件的正确可见状态。

OnClickNav(Selected:NavFlags){

    Selected.NavStatus=!Selected.NavStatus

    Selected.NavItem=='visibleComponetA'? this.visibleComponetA.NavStatus=Selected.NavStatus: this.visibleComponetA.NavStatus= false;
    Selected.NavItem=='visibleComponetB'? this.visibleComponetB.NavStatus=Selected.NavStatus: this.visibleComponetB.NavStatus= false;

app.commonet.ts

NavFlags类很简单

export class NavFlags {
  NavItem: string = '';
  NavStatus: boolean = false;

  constructor(NavItem: string, NavStatus: boolean) {
    this.NavItem = NavItem;
    this.NavStatus = NavStatus;
  }
}

nav-flags.ts

这样,“个人”页面就不会留下任何数据丢失。我没有复制商店。 完整的示例可以访问https://angulartool.de。 通过单击该按钮,可以在组件中导航页面,而不会丢失数据。

这个hack不是完美的,所以也许会有更好的方法来解决这个角度问题。

我查看了本页中的每个解决方案(并尝试了一些),但我不相信我们必须实现一种hack式的方式来实现路由之间的数据传输。

简单历史的另一个问题。状态是指,如果您在状态对象中传递特定类的实例,在接收它时它将不是实例。但它将是一个简单的JavaScript对象。

所以在我的Angular v10 (Ionic v5)应用中,我这样做了

this.router.navigateByUrl('/authenticate/username', {
    state: {user: new User(), foo: 'bar'}
});

在导航组件('/authenticate/username')中,在ngOnInit()方法中,我用this.router.getCurrentNavigation().extras.state-打印了数据

ngOnInit() {
    console.log('>>authenticate-username:41:',
        this.router.getCurrentNavigation().extras.state);
}

我得到了想要的数据

一些超级聪明的人(tmburnell)(不是我)建议重写路由数据:

let route = this.router.config.find(r => r.path === '/path');
route.data = { entity: 'entity' };
this.router.navigateByUrl('/path');

正如你在评论中看到的。

我希望有人会觉得这有用

更新4.0.0

更多细节请参见Angular Angular Router -在导航前获取数据。

原始

使用服务是正确的选择。在路由参数中,您应该只传递希望在浏览器URL栏中反映的数据。

参见Angular Cookbook组件通信-双向服务。

RC.4附带的路由器重新引入了数据

constructor(private route: ActivatedRoute) {}
const routes: RouterConfig = [
  {path: '', redirectTo: '/heroes', pathMatch: 'full'},
  {path: 'heroes', component: HeroDetailComponent, data: {some_data: 'some value'}}
];
class HeroDetailComponent {
  ngOnInit() {
    this.sub = this.route
      .data
      .subscribe(v => console.log(v));
  }

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

参见Plunker。

现在是2019年,这里的许多答案都有用,这取决于你想做什么。如果你想传递一些URL中不可见的内部状态(params, query),你可以从7.2开始使用state(正如我今天刚刚学到的:))。

从博客(Tomasz Kula) -您导航到....路线

…来自ts: this.router。navigateByUrl('/details', {state: {hello: 'world'}});

…from HTML template: <a routerLink="/details" [state]="{hello: 'world'}">Go</a> .

并在目标组件中拾取它:

constructor(public activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.state$ = this.activatedRoute.paramMap
      .pipe(map(() => window.history.state))
  }

有点晚了,但希望这能帮助到刚接触Angular的人。