私の要件はフォームのツリーを持つことです。ボタンをクリックした親フォームでは、子フォームのみが作成されます。これはnレベルまでこのように進むことができます。角4：親と子の両方と同じコンポーネントを使用する方法？
私のアプローチ：
私は1つのコンポーネントを作成しました。これは、親と子の両方として使用されます。ボタンをクリックすると、ActivatedRouteのroute.routeConfig.childrenに項目を動的に追加しています。次に、現在のパスを基準にして追加されたパスにナビゲートします。この部分まですべてがうまくいく。 私はscrenのすべてのフォームを参照してください。アクティブなフォームだけを画面上に表示したい。次に、ボタン（戻るボタン）をクリックすると、私はその親の親に行き、そのフォームのみを表示したいと思います。テンプレートで* ngifを使用して子フォームを開くときに、親フォームを非表示にすることができます。しかし、frmの子に戻ってきて見えるようにすることはできません。以下は私のコードです。私が他のアプローチを取るべきか、それとも自分のやり方で働かせるために何を追加する必要があるか教えてください。
私のコンポーネント。
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css'],
providers: [ConfigService]
})
export class TestComponent implements OnInit, OnDestroy {
name: string;
age: Number;
showParent: boolean = true;
childrenRoute: Routes;
message: any;
subscription: Subscription;
private sub: any;
constructor(private router: Router, private route: ActivatedRoute, private _configService: ConfigService) {
this.name = 'test data';
this.age = 20;
this.router = router;
if(this._configService.getConfig('showParent') != null){
this.showParent=false;
}
this.subscription = router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
if (_configService.getConfig('showParent') != null) {
this.showParent = _configService.getConfig('showParent');
}
}
});
}
ngOnInit() {
}
ngOnDestroy() {
// unsubscribe to ensure no memory leaks
this.subscription.unsubscribe();
}
showChildRecord() {
this.childrenRoute = [{
path: 'child',
component: TestComponent
}];
if (this.route.routeConfig != undefined) {
this.route.routeConfig.children = this.childrenRoute;
}
this._configService.setOption('showParent', false);
this.router.navigate(['./child'], { relativeTo: this.route });
}
back() {
this._configService.setOption('showParent', true);
this.router.navigate(["../"], { relativeTo: this.route });
}
}
サービスを使用して、同じコンポーネントの各インスタンス間でデータを共有しようとしました。
@Injectable()
export class ConfigService {
private config = {};
setOption(option, value) {
this.config[option] = value;
}
getConfig(option: string) {
if(option != undefined){
return this.config[option] != undefined ? this.config[option]: null;
}else
return null;
}
}
テンプレートtest.component.html
<div *ngIf="showParent">
<p>Name:
<input type="text" [(ngModel)]="name">
</p>
<p>Age:
<input type="text" [(ngModel)]="age">
</p>
{{name}} : {{age}}
<button (click)="showChildRecord();" > Go to Child Record</button>
<button (click)="back();">Back</button>
</div>
<router-outlet></router-outlet>
App.module.tsルート：
const appRoutes: Routes = [
{
path: 'child',
component: TestComponent,
children: [
{ path: 'child',
component: TestComponent
}
]
}
];
は私がサービスとトグルで "showParent" の情報を保存しようとしていますそれは行動に依存する。ルーティングイベント "NavigationEnd"の下で、私はそれを読んで、showParent properyに割り当てています。しかし、動作しません。それでも私の親フォームは隠されています。そして、私は空白の画面が表示されます。私が気づいた1つの問題は、 "NavigationEnd"イベントが複数回起動され、同じコンポーネントを使用しているbecozであり、新しい子が作成されたときに別のイベントが追加されることです。