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>
  • 相关阅读:
    【技术博客】利用handler实现线程之间的消息传递
    BUAA软件工程个人作业-软件案例分析
    BUAA软件工程结对项目作业
    BUAA软件工程个人项目作业
    BUAA软件工程个人博客作业
    BUAA-软件工程第一次作业
    BUAA-OO-最后单元总结
    BUAA-OO-第三单元总结
    BUAA-OO-第二单元总结
    第四单元总结&&OO总结
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10579229.html
Copyright © 2011-2022 走看看