获取父级的所有子组件，即使通过路由器出口渲染也是如此
，可以通过以下步骤实现：
- 首先，需要在父组件中定义一个方法，用于获取所有子组件。可以使用
this.$children属性来获取当前组件的所有子组件，然后递归调用每个子组件的该方法，将子组件添加到一个数组中。
methods: {
getAllChildComponents() {
let children = [];
this.$children.forEach(child => {
children.push(child);
if (child.$children.length > 0) {
children = children.concat(child.getAllChildComponents());
}
});
return children;
}
}- 在需要获取所有子组件的地方，调用父组件的
getAllChildComponents方法即可。
let allChildComponents = this.$parent.getAllChildComponents();这样就可以获取到父组件的所有子组件，无论是直接子组件还是通过路由器出口渲染的子组件。
对于这个问题，腾讯云提供了一些相关产品和服务，如云服务器、云原生应用引擎、云数据库等，可以根据具体需求选择适合的产品。具体产品介绍和链接地址可以参考腾讯云官方网站的相关页面。
相关·内容
我有一个主组件，需要检查它在所有当前呈现的组件中是否包含特定类型的组件： 在app.component.html中： <router-outlet></router-outlet> 在app.component.ts中： @ViewChildren(ComponentToFind) query: QueryList<ComponentToFind>; 但是，即使我导航到包含ComponentToFind类型的</em
浏览 15提问于2020-09-16得票数 0
即使shouldComponentUpdate()返回false，当使用setState()调用更新组件时，react如何为组件创建新的虚拟DOM？react是否会为所有组件重新创建虚拟DOM，甚至是没有调用setState()的组件？我的意思是，假设对子组件调用setState()，是否也会为父组件反应一个新的虚拟DOM？
浏览 0提问于2019-06-05得票数 0
我有一个父组件，其中很少有链接(使用路由)来加载子组件。子组件应该在父组件中加载。此外，在父组件中可用的筛选器(复选框)很少，必须在任何子组件的加载过程中应用。</div>我能够加载新闻HTML组件或视频HTML组件或音频HTML组件
浏览 0提问于2018-02-12得票数 1
如果路由相同，则无法再次加载组件，但父组件中的数据会更改。我有一个route.ts，它为一个组件编写了所有路由--假设/模块/{name}--我只更改父组件中的数据，但是路由是相同的--如何处理这种情况
在父组件中，在api调用父组件成功后，我将导航到路由。this.Service.updateInfo(res['I
浏览 6提问于2021-05-07得票数 0
回答已采纳
我试图使用这种技术将一些数据从父组件传递给子组件，并在值更改时调用子组件中的方法。我的问题是，子组件是通过<router-link>绑定到父组件的，并且当我尝试使用以下方法传递数据时：<router-outlet [some_value] = "some_value">&
浏览 2提问于2017-07-23得票数 11
回答已采纳
我希望能够将参数传递给ng插座引入的子组件。但我不知道该怎么做。下面是我的组件绑定的一个示例： bindings: { currentUser: '<'和一个传递配置文件的路由器。)传递给这个组件呢？？谢
浏览 5提问于2016-03-17得票数 8
回答已采纳
1回答
我在一个模板中有一个子<router-outlet>，它根据单击的菜单项显示各种组件。每个子组件都具有响应性，并且在调整页面大小时能够很好地处理自身。显而易见的解决方案是有两个<div>，它们的类是用display: none/block和@media查询有条件地设置的。这就是我被卡住<em
浏览 5提问于2018-01-15得票数 1
我用Angular CLI创建了我的Angular应用，但现在我在路由器上遇到了问题。我要构建的应用程序有一些页面有页眉和页脚，但也有一些页面没有，例如登录页面。我的第一个想法是有一个具有页眉和页脚的路由，它将成为所有其他需要它的路由的父级，但我找不到一种方法来在多个路由模块之间共享相同的父级。我能在文档中找到的指定父子关系的唯
浏览 1提问于2017-04-22得票数 2
我的目标是将数据从路由子节点发送到父级。我希望从子变量中获得一个变量的引用，该变量通过辅助路由嵌套在子变量到父变量中，以便将该变量同步到父变量。此变量最终将成为表单验证状态的布尔值。这是应用程序模板中的一个示例.似乎当我添加应用程序-新用户组件选择器时，它会破坏名为路由器出口的新用户输入：
<!我这个原型的</em
浏览 1提问于2018-05-29得票数 2
回答已采纳
我理解，为什么当我从数据库获取数据时，我必须通过dispatcher与DOM交互。父组件已呈现。它有两个子组件。其中一个是最初渲染的，第二个子级应该替换某个按钮上的第一个子级onClick。所有组件都是静态的(没有数据库连接)。
那么，我应该
浏览 1提问于2015-08-11得票数 0
我被告知，如果父母的道具发生变化，孩子不会重新呈现，而是如果父母的状态发生变化。那么这里的规矩是什么？1)应用程序只呈现一个子和外孙呈现？
2)应用程序呈现但独生子女不呈现孙女？顺便说一句
浏览 1提问于2019-11-17得票数 2
回答已采纳
父组件在回调函数的设置状态下，调用多个不同标签的子级(同一类型)来区分子级。但父组件中的'handleCheckbox‘始终只接收第一个子组件'Include Prefix’的标签参数值，即使在单击第二个开关时也是如此。已验证标签是否正确传递给子组件。来自
浏览 14提问于2020-07-18得票数 0
10回答
我是angular2新手 <router-outlet><router-outlet>我在父组件中有一个按钮，如果我点击这个按钮，它应该调用子组件中的一个方法(加载在路由器插座中)。有没有办法从父节点调用子组件(在路由器插座中)方法？
浏览 2提问于2017-08-30得票数 21
7回答
我有一个父组件，它会转到服务器并获取一个对象： selector : 'node-display', console.log(err); );在几个孩子中的一个展示这有点道理，但我将如何做以下工作：
从服务器获取“节点”数据，从
浏览 11提问于2017-01-03得票数 157
回答已采纳
我有一个懒惰的模块，我想要一个不同的经验，桌面和移动设备。基本上，我希望我的桌面布局像：
Component1显示一个列表，用户在列表上选择一个项目，component2将显示详细信息。我创建了名为“side”的路由器出口，作为侧边栏显示。下面是路由器配置： { component: LayoutComponent,
childre
浏览 0提问于2019-08-29得票数 3
回答已采纳
2回答
我有一个带路由器插座的组件。这个组件有一个select元素，我通过一个服务在ngOnInit上提供了一些类别。有3个子路由，其中一个导航到也想使用这些类别的组件。我的路线如下所示{ component: MarketplaceComponent,
resolvecomponent: ModulesComponent, resolve: { ca
浏览 5提问于2017-03-01得票数 1
我有一个组件有一些HTML代码，还有一些选项和下拉列表.这个组件我希望与其他组件共享，每个组件都有一个不同的URL。我这样做是可行的，但问题是当我从一个组件转到另一个组件(一个url到另一个url)时，所选的选项返回到它们的初始状态.我怎样才能让这件事成功？共享组件TS
import { Component, OnInit } from '@angular/core';
浏览 3提问于2017-07-15得票数 1
我一直在使用react和redux，每次我在ComponentDidMount中调用一些rest api，我可以用它设置一个状态，并将该状态传递给我的孩子，或者更改该状态并使用它。我也可以将这些数据保存在我的redux中，然后做所有我想做的事情。我最近开始使用graphql，我看到当一个人使用查询在render中获取数据时，我们呈现我们想要的数据，依此类推。但我关心的是，我如何不渲染它，而是以某种状态存储它，玩它，然后将它传递给孩子。我在apollo中
浏览 0提问于2019-05-27得票数 0
1回答
我有一个父组件，它将一个对象传递给一个子组件，而该子组件具有一个依赖于对象支持的计算属性。我可以看到，当我更新父服务器中的支柱对象时，这个支柱是在子对象中更新的，但是计算的属性只在加载时计算一次，然后再不会重新计算，即使我使用'deep'，计算属性或监视对象也不会被触发，对于观察者也是如此。下面是一个代码示例
浏览 1提问于2019-09-05得票数 2
回答已采纳
我有一个父组件，在它的状态下有一个数组，这个数组也是随着时间的推移而添加的。 这是父级。里面有很多东西，但我已经把它提炼成主要的关注点:状态、componentShouldUpdate函数(它适用于组件需要做的所有其他事情)和show data方法(我可以确认gaitStats确实可以正确更新this.setState({
timeline: this.state.timeli
浏览 15提问于2019-06-05得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
