英文:
How Can Ibinding data from parent component to child component?
问题
我有一个父组件有许多属性，每次都需要使用一些子组件，首先，当我需要主组件时，我会使变量dashboardState == 'main'。
<div *ngIf="dashboardState === 'main'" class="col-12 p-0 p-md-1 h-100">
<app-main-dashboard [site]="site" [siteContent]="siteContent"></app-main-dashboard>
</div>
但我知道这不是一个好主意，因为现在我有很多子组件，所以我寻找更好的方法，我发现我可以使用router-outlet与children一起工作，这是一种好方法之一，但我发现了一个问题，如何共享父组件上的属性，我唯一的办法是创建一个服务，然后使用这个服务共享所有我的数据。或者，每次需要子组件时，我可以调用它们，例如，如果我需要组件X，我会调用组件X并销毁其他组件，就像这样。
@ViewChild('container', { read: container }) container: ViewContainerRef;
onBuildChildComponent() {
const componentRef = this.container.createComponent(componentChild);
componentRef.instance.param01 = param01;
componentRef.instance.param02 = param02;
componentRef.changeDetectorRef.detectChanges();
}
什么是处理许多子组件并且需要与它们共享许多属性的最佳方法？当然，如果您有其他建议，请不要犹豫。
英文:
I have a parent component has many properties, and I need every time to use some component child, firstly I worked with conditions when I need the main component I make the variable dashboardState == 'main'.
<div *ngIf="dashboardState === 'main'" class="col-12 p-0 p-md-1 h-100">
<app-main-dahsboard [site]="site" [siteContent]="siteContent"></app-main-dahsboard>
</div>
but I know that is not a good idea because now I have more a lot of component child, so I search for a better way I find that I can work with router-outlet with children, it's one of the good ways, but I find a problem to share the properties that I have on the parent component, I have only one way is to create a Service and I will share all my data using this service.
or I can invoke child component every time I need them for example if I need component X I will invoke component X with destroying other components. like this way.
@ViewChild('container', { read: container }) container: ViewContainerRef;
onBuildChildCompoenent() {
const componentRef = this.container.createComponent(componentChild);
componentRef.instance.param01 = param01;
componentRef.instance.param02 = param02;
componentRef.changeDetectorRef.detectChanges();
}
what is the best way to work with a lot of child components and also I need to share a lot of properties with them? and of course, if you have another suggestion, please don't hesitate.
答案1
得分: 1
@Input()：
父组件模板中，请添加以下内容：
<child [site]="site" [siteContent]="siteContent"></child>
然后在 child-component 中：
@Input() site: any;
@Input() siteContent: any;
为什么您说“现在我有很多子组件”？
您没有使用 *ngFor 或其他方式来添加多个 <child> 标签。
无论如何，即使是这种情况，也没有问题。
使用 router-outlet：
{
path: '',
component: HomeComponent,
children: [
{ path: '', redirectTo: '/site', pathMatch: 'full' },
{
path: 'site',
data: {
some_data: 'value'
},
loadChildren: () => import('./home/site/site.module').then(m => m.SiteModule)
},
{ path: '**', redirectTo: '/' }
]
}
然后在您的 site-component 中：
ngOnInit() {
this.route.data.subscribe(console.log);
}
英文:
To pass data from parent to children, you have several ways :
@Input() :
In parent component template, put this
<child [site]="site" [siteContent]="siteContent"></child>
And in child-component :
@Input() site: any;
@Input() siteContent: any;
Why are you saying "now I have more a lot of component child".
You don't have any *ngFor or anything else to have several <child> tag.
Anyway, even if it's the case, that's not a bad thing.
With router-outlet :
{
path: '',
component: HomeComponent,
children: [
{ path: '', redirectTo: '/site', pathMatch: 'full' },
{
path: 'site',
data: {
some_data: 'value'
},
loadChildren: () => import('./home/site/site.module').then(m => m.SiteModule)
},
{ path: '**', redirectTo: '/' }
]
}
Then in your site-component :
ngOnInit() {
this.route.data.subscribe(console.log);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论