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>
  • 相关阅读:
    C# linq lambda 分组获取最新的数据
    C# SQLite datetime 时间比较查询
    .net core webApi 上传附件
    ①、Vue学习
    阿里云单片上传、断点续传,上传到指定文件夹下面
    php设计模式之策略模式
    composer安装laravel
    php全局配置
    windows系统安装composer
    php设计模式之工厂模式
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10579229.html
Copyright © 2011-2022 走看看