zoukankan      html  css  js  c++  java
  • [Angular] Use Angular components in AngularJS applications with Angular Elements

    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>
  • 相关阅读:
    Android状态栏和导航栏
    ScrollView小记
    iOS本地推送
    java-集合框架-泛型1
    java-集合框架4---foreach使用--for的增强使用
    java-集合框架3-迭代器的使用
    JAVA-集合框架2
    Number 数据类型转化 NaN 函数isNaN
    数据类型分类
    VScode 插件推荐安装
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10579229.html
Copyright © 2011-2022 走看看