我有这个内容出血问题。我正在路由到订阅路由参数时拉取产品ID的页面。
它在初始加载时工作正常,但是,如果路径参数更新,则产品的新内容将加载到旧内容之上。我不希望内容相互渗透,因为它们会导致冲突。
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>
如何在输入新内容信息之前清除现有内容的这些标记?
答案 0 :(得分:0)
<强>分辨强>
在动态创建活动表单期间,我错过了一个步骤。
this.productForm: FormGroup = this.formBuilder.group({});
此问题是我的页面出血信息的根本原因,因为内容重新加载会因我的表单崩溃而停止。新控件将添加到formGroup / Form中的现有控件。