首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在路由器出口中调用同级组件函数并在Angular中等待其完成

在Angular中,可以通过使用@ViewChild装饰器和模板引用变量来调用同级组件的函数,并在路由器出口中等待其完成。下面是具体的步骤:

  1. 在路由器出口的组件中,首先定义一个模板引用变量。例如,假设你要调用的同级组件是名为"childComponent"的组件,你可以在模板中添加以下代码:
  2. 在路由器出口的组件中,首先定义一个模板引用变量。例如,假设你要调用的同级组件是名为"childComponent"的组件,你可以在模板中添加以下代码:
  3. 在路由器出口的组件类中,使用@ViewChild装饰器来获取对该同级组件的引用。在组件类中添加以下代码:
  4. 在路由器出口的组件类中,使用@ViewChild装饰器来获取对该同级组件的引用。在组件类中添加以下代码:
  5. 现在你可以在路由器出口的组件类中调用同级组件的函数,并在等待其完成。例如,如果同级组件中有一个名为"doSomething()"的函数,你可以在路由器出口的组件中添加以下代码:
  6. 现在你可以在路由器出口的组件类中调用同级组件的函数,并在等待其完成。例如,如果同级组件中有一个名为"doSomething()"的函数,你可以在路由器出口的组件中添加以下代码:

需要注意的是,同级组件中的函数需要返回一个Promise对象,或者通过async/await机制来实现等待函数完成的操作。在同级组件中,可以使用resolve来处理Promise对象或者使用async/await来等待函数完成。

对于以上描述中提到的Angular中的组件、装饰器、模板引用变量等概念,您可以参考腾讯云提供的Angular开发文档和相关产品介绍:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

Angular提供了一组生命周期hooks(特殊事件),可以被分接到生命周期中,并在需要时执行操作。构造函数会在所有生命周期事件之前执行。每个接口都有一个前缀为ng的hook方法。...ngDoCheck:检测并在Angular上下文发生变化时执行。每次更改检测运行时,会被调用。 ngOnDestroy:在Angular销毁指令/组件之前清除。...组件特定hooks: ngAfterContentInit:组件内容已初始化完成 ngAfterContentChecked:在Angular检查投影到视图中的绑定的外部内容之后。...如何在Angular 2启用延迟加载? 大多数企业应用程序包含用各式各样的用于特定业务案例的模块。捆绑整个应用程序代码并完成加载,会在初始调用时,产生巨大的性能开销。...从堆栈溢出就是一个区别:  当异步操作完成或失败时,Promise会处理一个单个事件。 Observable类似于(在许多语言中的)Stream,当每个事件调用回调函数时,允许传递零个或多个事件。

17.3K80

AngularDart 4.0 高级-生命周期钩子 顶

组件有一个由Angular自己管理的生命周期。 Angular创建它,渲染它,创建和渲染它的子项,在数据绑定属性发生变化时对进行检查,并在将它从DOM删除之前对进行销毁。...生命周期序列 通过调用构造函数创建组件/指令后,Angular在特定时刻按以下顺序调用生命周期钩子方法: 钩子 作用和时机 ngOnChanges Angular(重新)设置数据绑定输入属性时响应。...Angular团队负责人Misko Hevery解释了为什么您应该避免使用复杂的构造函数逻辑。 不要在组件构造函数获取数据。您不应该担心当在测试下创建或决定显示之前时新组件会尝试联系远程服务器。...在ngOnInit之前Angular调用ngOnChanges ...并在此之后多次调用。 它只调用一次ngOnInit。 您可以期待Angular在创建组件后立即调用ngOnInit方法。...回想一下,在调用AfterView钩子之前,Angular调用了AfterContent的两个钩子。 在完成组件的视图之前,Angular完成投影内容的组合。

6.2K10
  • 8分钟为你详解React、Angular、Vue三大框架

    React声明组件的两种主要方式是通过功能函数组件和基于类的组件。 功能函数组件 功能组件是用一个函数声明,用来返回一些JSX。 ? 类组件 基于类的组件是使用ES6类来声明的。...Hooks是让开发者从函数组件 "钩入"React状态和生命周期特性的函数。它们使代码具有更强的可读性且更易理解。Hooks并不在类组件内工作,它的终极目标是在React消除类组件的存在。...Hooks规则 Hooks也有一些规则,在使用Hooks之前必须遵循这些规则: 钩子只能在顶层调用(不能在循环或if语句中调用)。 钩子只能在React函数组件调用,不能在普通函数或类组件调用。...定制Hooks 构建自己的Hooks,也就是所谓的自定义Hooks,可以让你把组件逻辑提取到可重用的函数。自定义钩子是一个名称以 "use "开头的JavaScript函数,它可以调用其他的钩子。...结合反应式系统,Vue能够计算出需要重新渲染的组件的最小数量,并在App状态发生变化时,启动最小量的DOM操作。

    22.1K20

    AngularDart4.0 英雄之旅-教程-06服务 顶

    您可能会试图在构造函数调用getHeroes()方法,但构造函数不应包含复杂的逻辑,特别是调用服务器的构造函数(如数据访问方法)。 构造函数用于简单的初始化,将构造函数参数连接到属性。...要用Angular调用getHeroes(),可以实现Angular ngOnInit生命周期钩子。 Angular组件生命周期中的关键时刻提供接口:创建,每次更改之后,最终销毁。...当组件实现该方法时,Angular会在适当的时候调用它。 在“Lifecycle Hooks”页面详细了解生命周期挂钩。...使用Future,您可以注册回调函数,在计算完成时(结果准备就绪),或需要报告计算错误时调用。 这是一个简单的解释。...阅读下一个教程页面中有关Angular组件路由器和视图之间的导航。 附录:数据延迟 要模拟一个缓慢的连接,请将以下getHeroesSlowly()方法添加到HeroService。

    2.9K10

    AngularDart4.0 英雄之旅-教程-07路由 顶

    当用户点击电子邮件的深层链接时,打开特定英雄的详细视图。 完成后,用户将可以像这样浏览应用程序: ? 为了满足这些要求,您将添加Angular路由器到应用程序。...在构造函数中注入HeroService,并将其保存在一个专用的_heroService字段调用服务来获取Angular ngOnInit()生命周期钩子的英雄。...本页“路由链接”部分所述,AppComponent模板的顶级导航将路由器链接设置为目标路由,/dashboard 和/ heroes的固定名称。 这次,您绑定到包含链接参数列表的表达式。...在构造函数中注入路由器,以及HeroService。 通过调用路由器的navigate()方法来实现gotoDetail()。...早些时候,你用元素包围了这些链接: router-link-active 类 Angular路由器将router-link-active类添加到路由与活动路由相匹配的HTML导航元素。

    17.6K30

    Angular2 之 路由与导航基础知识路由模块组件路由路由守卫

    一个url对应的一个页面,在angular2是一个组件。定义一个规则。...组件路由 我们需要将一些特征区域分割开来,做成自己单独的模块。必hero模块。在这里,我们需要hero单独的导航,这也就是组件路由。...在等待服务器的答复时,我们没法阻塞它 —— 这在浏览器是不可能的。 我们只能用异步的方式在等待服务器答复之前先停止导航。 我们需要CanDeactivate守卫。...自定义预加载策略 Route Data 启动预加载 其中有参数preload布尔值,如果它为true,就调用内置Router 提供的load函数预主动加载这些特征模块。...在异步加载特征模块和决定是否预加载它们时,路由器调用preload方法。 preload方法有两个参数,第一个参数Route提供路由配置,第二个参数是预加载特征模块的函数

    3.3K10

    JavaScript框架比较:AngularJS vs ReactJS vs EmberJS

    它可以影响你按时完成项目并在将来维护代码的能力。...JavaScript框架,Angular.js,Ember.js或React.js,给你的代码带来结构,并保持有序化,从而使您你的app更灵活,更具可扩展性,并更容易开发。 ?...将React集成到传统的MVC框架,Rails需要一些配置。...当走出典型用途时会很麻烦。 Ember的对象模型实现膨胀Ember的整体大小并在调试时调用堆栈。 最有见地和最重的框架。 对于小项目而言过大。 测试用例似乎模糊/不完整。...路由 需要模板或控制器到路由器配置,必须手动管理。 React不处理路由。但是有很多模块用于路由,react-router,flow-router。 更强大的路由,以牺牲可增加的复杂性为代价。

    12.7K60

    你要的 React 面试知识点,都在这了

    Props 和 State 什么是 PropTypes 如何更新状态和不更新状态 组件生命周期方法 超越继承的组合 如何在React应用样式 什么是Redux及其工作原理 什么是React路由器及其工作原理...componentDidUpdate() 在组件完成更新后立即调用。在初始化时不会被调用。 componentWillUnMount() 件从 DOM 移除的时候立刻被调用。...这是一个函数组件,它采用props并在UI上显示这些props。 在useState钩子的帮助下,我们将这个函数组件转换为有状态组件。...如何在React进行API调用 我们使用redux-thunk在React调用API。因为reduce是纯函数,所以没有副作用,比如调用API。...sendEmailAPI是从组件调用函数,它接受一个数据并返回一个函数,其中dispatch作为参数。我们使用redux-thunk调用API apiservice,并等待收到响应。

    18.5K20

    Angular快速学习笔记(2) -- 架构

    Angular 应用就是由一组 NgModule 定义的,应用至少会有一个用于引导应用的根模块,通常还会有很多特性模块。...Angular充分利用了装饰器(java里的annotation)来标识类的类型,并在装饰器中提供元数据(metadata)来告知ng如何使用它们。...NgModule 为一个组件集声明了编译的上下文环境,它专注于某个应用领域、某个工作流或一组紧密相关的能力。 NgModule 可以将其组件和一组相关代码(服务)关联起来,形成功能单元。...1.1.2 NgModule 和组件 NgModule 为其中的组件提供了一个编译上下文环境。根模块总会有一个根组件并在引导期间创建它。...当用户点击某个英雄的名字时,(click) 事件绑定会调用组件的 selectHero 方法。 再来看双向数据绑定,这个是脱离jq手动绑定数据的伟大发明。

    5.3K20

    【19】进大厂必须掌握的面试题-50个React面试

    React的一些主要优点是: 它提高了应用程序的性能 它可以方便地在客户端和服务器端使用 由于有了JSX,代码的可读性提高了 React易于与其他框架(Meteor,Angular...虚拟DOM是轻量级的JavaScript对象,最初只是真实DOM的副本。它是一个节点树,列出了元素,它们的属性和内容作为对象及其属性。React的render函数从React组件创建一个节点树。...此函数必须保持纯净,即,它必须返回相同的结果每次被调用。 13.如何将两个或多个组件嵌入到一个组件?...事件是作为函数而不是字符串传递的。 事件参数包含一组特定于事件的属性。每个事件类型都包含自己的属性和行为,这些属性和行为只能通过其事件处理程序进行访问。 23.如何在React创建事件?...因此,元素无法直接更新状态,并且提交由JavaScript函数处理。此功能可以完全访问用户输入到表单的数据。

    11.2K30

    AngularDart 4.0 高级-路由概述 顶

    Angular路由器借鉴了这种模式。 它可以将浏览器URL解释为导航到客户端生成视图的指令。它可以将可选参数传递给支持视图组件,以帮助确定要呈现的具体内容。...并且路由器在浏览器的历史记录记录活动,所以后退和前进按钮也起作用。 设置概述 添加angular_router 路由器功能位于angular_router库,该库自带软件包。...在任何使用路由器功能的Dart文件,导入路由器库: import 'package:angular_router/angular_router.dart'; 注册提供者和列表指令 如果您已经熟悉Angular...路由器插座 当此应用的浏览器URL成为/#/heroes时,路由器将该URL与名为Heroes的RouteDefinition匹配,并在放置在宿主视图HTML的RouterOutlet后显示HeroesComponent...该URL可以直接从浏览器地址栏获得。 但是大多数情况下,由于某些用户操作(点击锚标签)迫使您导航。

    6.1K20

    Angular实战之使用NG-ZORRO创建一个企业级后台框架(进阶篇)

    前言:   上一篇文章我们讲了如何在创建的Angular项目中快速引入ng-zorro-antd企业组件库,并且快速构建后台管理页面框架模板。...这一章主要介绍的是如何在创建好的后台管理页面框架的快速生成NG-ZORRO相关的组件,并且介绍Angular相关目录结构、生命周期函数,路由配置和使用相关知识点,以及如何使用Angular CLI使用一行代码快速添加...组件生命周期函数: 什么是生命周期函数?...ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。 在第一轮 ngOnChanges() 完成之后调用,只调用一次。...ngAfterContentChecked() 每当 Angular 完成被投影组件内容的变更检测之后调用

    4K20

    Angular Route 中提前获取数据

    通过本文,你将学会使用 resolver, 在 Angular App 应用 resolver,应用到一个公共的预加载导航。...\n\n通常,我们都会在组件的 ngOnInit() 钩子函数获取数据。也就是说,组件加载完之后,我们发起数据请求。...\n\n接着,创建一个服务来获取 JSONPlaceholder 列表数据。然后在 resolver 调用,接着在路由中配置 resolve信息,(页面将会等待)直到 resolver 被处理。...在 resolver 被处理之后,我们可以通过路由来获取数据然后展示在组件。...现在,你需要一个路由去配置 resolver,从路由获取数据,然后让数据展示在组件。为了进行路由跳转,我们需要创建一个组件。\n\nbash\n

    6.2K30

    Go 语言 Web 编程系列(二)—— HTTP 请求处理的底层运行机制

    方法,进而调用 net.Listen("tcp", addr),也就是基于 TCP 协议创建 Listen Socket,并在传入的IP 地址和端口号上监听请求,在本例,IP 地址为空,默认是本机地址...客户端请求的具体处理逻辑都是在 c.serve 完成的。...我们在上篇教程的示例传递的是 nil,则默认会获取 DefaultServeMux, 这个 handler 变量其实就是一个路由器,它用来匹配 URL 路由与对应的处理函数,而这个映射关系在 main...函数的第一行代码中就完成了:http.HandleFunc("/", sayHelloWorld),作用就是注册了请求 / 的路由规则,当请求 URL 路由为 /,就会跳转到函数 sayhelloWorld...对于 Go Web 应用 HTTP 请求的底层处理,学院君就简单介绍到这里,你最好结合源码来阅读和理解,下一篇,我讲给大家介绍如何在 Go Web 应用快速实现路由器

    1.4K20

    Angular2 之 单元测试

    组件的测试 单独的service测试 Angular的测试工具 Angular的测试工具类包含了TestBed类和一些辅助函数方法,当时这不是唯一的,你可以不依赖Angular 的DI(依赖注入)系统,...detectChanges:在测试Angular变化检测。 每个测试程序都通过调用fixture.detectChanges() 来通知Angular执行变化检测。...调用tick()模拟时间的推移,直到全部待处理的异步任务都已完成,在这个测试案例,包含getQuote承诺的解析。...你仍然可以将接受 done回调的函数传给it。 但是,你必须链接承诺、处理错误,并在适当的时候调用done。...tick函数Angular测试工具之一,是fakeAsync的同伴。 它只能在fakeAsync的主体中被调用调用tick()模拟时间的推移,直到全部待处理的异步任务都已完成

    5.5K20

    react-03

    数据都需要通过ajax请求获取, 并在前端异步展现 2)....后台路由 * 注册路由: router.get(path, function(req, res)) * 当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据...关于url的# 1. 理解# '#'代表网页的一个位置。右面的字符,就是该位置的标识符 改变#不触发网页重载 改变#会改变浏览器的访问历史 2....相关API 1). react-router的相关组件: Router: 路由器组件, 用来包含各个路由组件 Route: 路由组件, 注册路由 IndexRoute: 默认子路由组件 hashHistory...Router: 路由器组件 属性: history={hashHistory} 用来监听浏览器地址栏的变化, 并将URL解析成一个地址对象,供React Router匹配 子组件: Route 3).

    2.4K30

    基于 qiankun 的微前端最佳实践(万字长文) - 从 0 到 1 篇

    (public-path.js 具体实现在后面) 第 21 行:微应用的挂载函数,在主应用运行时将在 mount 生命周期钩子函数调用,可以保证在沙箱内运行。...(public-path.js 具体实现在后面) 第 12 行:微应用的挂载函数,在主应用运行时将在 mount 生命周期钩子函数调用,可以保证在沙箱内运行。...我们以 实战案例 - feature-inject-sub-apps 分支 为例,我们在主应用的同级目录(micro-app-main 同级目录),使用 @angular/cli 先创建一个 Angular...在 extra-webpack.config.js 修改完成后,我们还需要修改一下 package.json 的启动命令,修改如下: // micro-app-angular/package.json...micro-app 从上图来分析: 第 70 行:微应用的挂载函数,在主应用运行时将在 mount 生命周期钩子函数调用,可以保证在沙箱内运行。

    6.7K40

    angular面试题及答案_angular面试

    ngOninit:初始化指令或组件,在angular第一次显示展示组件的绑定属性后调用,该方法只会调用一次 ngDocheck:检测 ngAfterContentInit:当把内容投影进组件之后调用,...第一次调用ngDocheck()之后调用,只调用一次,只适用于组件 ngAfterContentChecked:每次完成被投影组件内容的变更检测之后调用,只适用于组件 ngAfterViewInit...:在angular初始化组件及其子组件的视图之后调用,只调用一次,只适用于组件 ngAfterViewChecked:每次做完组件视图和子视图的变更检测之后调用,只适用于组件 ngOnDestroy:...angular路由器使用base href 作为组件、模板的基地址,开发期间,通常会在index.html所在目录启动服务器,所以这个目录就是根目录,所以可以在index.html 的顶部添加<base...当类被初始化之后,构造函数会被调用 ngOnInit ngOnInit 是angularOnInit钩子的实现,用来初始化组件

    11.1K120

    Angular 11正式发布:加入webpack 5,升级至TS 4.0,不再支持IE 9 和10

    现在我们可以报告原始目标已经完成了!我们已对所有三个仓库的所有问题完成了分类,并会持续对新报告的问题做类似工作。 我们的承诺是:未来,所有新报告的问题都将在 2 周内完成分类。...在此过程,我们解决了路由器和表格的一些热门问题: https://github.com/angular/angular/issues/13011 https://github.com/angular...parallel(并行)函数允许开发人员与组件并行运行多个异步交互,从而简化测试的异步动作。...现在,语言服务将能够像 TypeScript 编译器一样,正确地推断模板的泛型类型。例如,在下面的屏幕截图中,我们可以推断迭代器的类型为字符串。...IE11 是 Angular 还在支持的唯一 IE 版本。我们还移除了一些已弃用的 API,并在弃用列表添加了一些项目。

    3.3K30

    Angular 服务

    heroes: Hero[]; 注入 HeroService 往构造函数添加一个私有的 heroService,类型为 HeroService。...getHeroes(): void {  this.heroes = this.heroService.getHeroes();} 在 ngOnInit 调用它 你固然可以在构造函数调用 getHeroes...而是选择在 ngOnInit 生命周期钩子调用 getHeroes(),之后交由 Angular 处理,它会在构造出 HeroesComponent 的实例之后的某个合适的时机调用 ngOnInit。...ngOnInit() {  this.getHeroes();} 查看运行效果 刷新浏览器,该应用仍运行的一既往。 显示英雄列表,并且当你点击某个英雄的名字时显示英雄详情视图。...在组件的 ngOnInit 生命周期钩子调用 HeroService 方法,而不是构造函数。 你创建了一个 MessageService,以便在类之间实现松耦合通讯。

    3.3K70
    领券