在路线 link Angular 中传递对象

Question

大家好，我想知道当我点击 link 时如何在路由中传递一个对象，例如，在我的例子中，我有一个包含产品的页面，如果我点击“购买”，那么将重定向到我的组件购买，传递完整的产品对象

主页组件

<div class="container main-container
    <ul  class="nav product-list">
        <li *ngFor="let products of product" >
            <div class="card">
                <img src="{{products.Image}}" alt="Denim Jeans" style="width:100%;height:250px;">
                <h1>{{products.name}}</h1>
                <p class="price">€ {{products.price}} </p>
                <p><a type="button" class="btn btn-info botaoProduto" [routerLink]="['/shop/purchase',objecProducttHere]">Purchase</a></p>
            </div>
        </li>
    </ul> 
</div>

<script>
</script>

在我的ShopRoute.ts

const shopRoutingConfig:Routes = [
    {
        path:'',component:ShopAppComponent,
        children:[
            {path:'purchase/objectproduct',component:PurchaseCompoet}
        ]
    }
]
    
@NgModule({
    imports:[
        RouterModule.forChild(shopRoutingConfig)
    ],
    exports:[RouterModule],
})
export class ShopRoutingModule{}

更新

product:Product;
tempData:BasicproductData;

ngOnInit() {

   if(this.obterUsuarioLogado())
    {
        this.router.events.pipe(
            filter(e => e instanceof NavigationStart),
            map(() => this.router.getCurrentNavigation().extras.state)
          ).subscribe(result=>{ 

              this.product = result as Product //here product object its fine

              this.tempData.id = this.product.id; // here, even product object filled, tempData receive undefinned
              this.tempData.name = this.product.name;//same here problem here
              console.log(this.tempData);

              console.log( this.product);
             
          },
          error=> this.errorMessage);

          //this.sendOrder(this.tempData);
    };
}

我的模型 BasicProductData 在 basicproductdata.ts

export class BasicProductData
{
    id:strring;
    name:string;
}

Answer 1

你可以把对象放在路由的extras中

<p>
     <a type="button" class="btn btn-info botaoProduto" 
     [routerLink]="['/shop/purchase']" [state]="products">Purchase</a>
</p>

在采购组件中

product:Product;
tempData:BasicproductData;

ngOnInit() {

   if(this.obterUsuarioLogado())
    {
        this.router.events.pipe(
            filter(e => e instanceof NavigationStart),
            map(() => this.router.getCurrentNavigation().extras.state)
          ).subscribe(result=>{ 

              this.product = result as Product //here product object its fine
              this.tempData=new BasicproductData();
              this.tempData.id = this.product.id; // here, even product object filled, tempData receive undefinned
              this.tempData.name = this.product.name;//same here problem here
              console.log(this.tempData);

              console.log( this.product);
              this.sendOrder(this.tempData);
          },
          error=> this.errorMessage);

          // you cant reach outside of subscribe this is async
    };
}

在路线 link Angular 中传递对象

Pass the object in route link Angular

angular-routing

angular

angular-router

angular-routerlink