[Angular] Use Angular components in AngularJS applications with Angular Elements
Angular in with use angularjs Elements Components Applications
2023-09-14 09:00:49 时间
When migrating AngularJS (v1.x) applications to Angular you have different options. Using Angular Elements is one of them. In this lesson we learn how to integrate an Angular Element into an AngularJS (v1.x) application. We will leverage some features release in the latest AngularJS 1.7.3 that make it fully compatible with custom elements.
Angular Element:
import { Component, OnInit, Input, Output, EventEmitter, AfterViewInit, ElementRef, Attribute, AfterContentInit, ChangeDetectorRef } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms'; @Component({ // tslint:disable-next-line:component-selector selector: 'feedback-form', templateUrl: './feedback-form.component.html', styleUrls: ['./feedback-form.component.scss'] }) export class FeedbackFormComponent implements OnInit { feedbackForm: FormGroup; _name; @Input() set name(val) { this._name = val; this.feedbackForm.patchValue({ name: val }); } get name() { return this._name; } @Output() feedbackSubmit = new EventEmitter(); constructor() {} ngOnInit() { this.feedbackForm = new FormGroup({ name: new FormControl(this.name), feedback: new FormControl('') }); } onSubmit({ value, valid }) { if (valid) { this.feedbackSubmit.next(value); } } }
Using in AngularJS:
const appModule = angular.module('myApp', []); appModule.component('myApp', { template: ` <h1>AngularJS <3 Angular</h1> <feedback-form ng-prop-name="$ctrl.name" ng-on-feedback_submit="$ctrl.onFeedbackSubmit($event)"></feedback-form> `, controller: function() { this.name = 'Juri'; this.onFeedbackSubmit = ev => { console.log('Got ', ev.detail); }; } }); angular.element(function() { angular.bootstrap(document, ['myApp']); });
Here the important things is to know how to listen to the event and passing the prop:
ng-prop-<input_name>
ng-on-<output_name>
相关文章
- 自定义 angular-datetime-picker 格式
- angular组件的基本使用
- Angular: 最佳实践
- 模块化开发 Angular 应用 [含懒加载]
- 如何在Angular项目中使用MQTT
- Angular 应用里 index.html 的作用
- 关于 Angular Universal 应用执行时需要 Browser API 的问题
- Angular Universal Application 应该处理 HTTP POST 请求吗?
- 干货 | 一文搞懂在AlmaLinux上安装Angular JavaScript框架
- 【Angular教程】-组件通信|8月更文挑战
- 【Angular教程】-内容投影u002F@ContentChildu002F@ViewChild
- 关于 Angular 应用对浏览器 Back 按钮支持问题的讨论
- 关于 Angular 开发时对主流浏览器支持的话题
- Angular 项目路径添加指定的访问前缀
- Angular 依赖注入错误消息:ERROR Error NullInjectorError No provider for XX
- Angular 项目中 angular.json builder 字段的可选项介绍
- MySQL Error number: 3739; Symbol: ER_SRS_INVALID_ANGULAR_UNIT; SQLSTATE: SR002 报错 故障修复 远程处理
- Angular 4.0发布,致力于减小代码体积详解编程语言
- Angular 框架将进入 2.0 时代
- MSSQL条件查询IN机制优化技巧(mssql条件查询in)
- 如何在MySQL中代替IN关键字(mysql中代替in)
- MySQL中IN运算符的使用技巧(mysql中 与in)
- MySQL中IN操作符的长度限制问题(mysql中in长度限制)
- MySQL表中使用IN命令优化索引,提高查询效率(mysql中in命中索引)
- MySQL中IN语句的参数化使用方法(mysql中in参数化)
- Oracle如何优化IN查询以提高效率(oracle优化in查询)
- 提升Oracle IN操作中的性能改进(oracle in的性能)
- angular简介和其特点介绍