角度4內容出血路線參數更新

我有這個內容出血問題。我正在路由到訂閱路由參數時拉取產品ID的頁面。角度4內容出血路線參數更新

它在初始加載時工作正常，但是，如果路由參數已更新，則產品的新內容將加載到舊內容的頂部。我不希望這些內容因爲衝突而流血。

PRODUCT.COMPONENT.TS 
... 
constructor(
    private authService: AuthService, 
    private route: ActivatedRoute, 
    private router: Router, 
    private httpService: HttpService 
) { } 

ngOnInit() { 
    this.route.params 
    .subscribe(params => { 
     const id = +params['id']; 
     this.loadProduct(id); 
     console.log(`Current param ID is: ${id}`); 
    }); 
} 

loadProduct(prod_id: number) { 
    this.httpService.getProduct(prod_id) 
    .subscribe((prod: any) => { 
     this.prod = prod.data[0]; 
     console.log(this.prod); 
     this.processProduct(); 
    }); 
} 
... 

APP.COMPONENT.HTML 

<div fxLayout="column" fxFlex="100%"> 

    <afn-navbar fxFlex="7%"></afn-navbar> 

    <div fxLayout="row" fxFlex="88%"> 
    <afn-sidebar fxLayout="column" fxFlex="10%"></afn-sidebar> 

    <div fxLayout="column" fxFlex="90%"> 
     <router-outlet></router-outlet> 
    </div> 

    </div> 

    <afn-footer fxFlex="5%"></afn-footer> 

</div> 

ROUTE CONFIGURATIONS 

const routes: Routes = [ 
    { path: 'lt/dashboard', canActivate: [ AuthGuard ], component: DashboardComponent }, 
    { path: 'lt/product/:id', canActivate: [ AuthGuard ], component: ProductComponent } 
];

DISCOVERY

我注意到的是有內容出血區域是嵌入/子組件，其選擇的標籤是屬性綁定到一個數組結構的輸入源的人。我懷疑該數組是被附加的，而不是被其新內容覆蓋。因此信息的重複。

例如：

<app-stops class="card-spacer" [stops]="prod.delivery.stops">Stops are loading...</app-stops> 

STOPS.COMPONENT.TS 

import { Component, Input, OnInit } from '@angular/core'; 

import { Stop } from '../../../definitions/stop'; 

@Component({ 
    selector: 'app-stops', 
    templateUrl: './stops.component.html', 
    styleUrls: ['./stops.component.scss'] 
}) 
export class StopsComponent implements OnInit { 

    @Input() stops: Stop[]; 

    ngOnInit() { 
    console.log(this.stops); 
    } 

} 

STOPS.COMPONENT.HTML 

<section id="stops" *ngIf="stops"> 
    <div class="card"> 
    <div class="card-block"> 
     <afn-stop-panel [stop]="stop" *ngFor="let stop of stops"></afn-stop-panel> 
    </div> 
    </div> 
</section>

怎樣的新的內容信息的輸入之前明確自己的現有內容的這些標記？

來源

2017-09-13 Andrew Lobban

聽起來像你可能有你的路線配置或路由器插座的問題。你可以發佈你的一些代碼嗎？ – DeborahK

上面的代碼對路由參數的變化作出了反應，但不*顯示您的路由配置或路由器插座。您的路線配置將位於您的一個Angular模塊中。 – DeborahK

我不會立即看到可能導致這種情況的原因。你的整個應用只有一個路由器插座？您的DashboardComponent或ProductComponent在元數據中是否具有選擇器？創建一個演示您的問題的重要程序可能會有幫助，因此我們可以更仔細地查看它。 – DeborahK

議決

我缺少動態創建的反應形式的過程中的一個步驟。

this.productForm: FormGroup = this.formBuilder.group({});

此問題是我的頁面出血信息的根本原因，因爲內容重新加載會因我的表單崩潰而停止。新控件將被添加到formGroup/Form中的現有控件中。

來源

2017-09-18 19:51:02

角度4內容出血路線參數更新

回答

相關問題