1

我有一个项目可以在 Gmail Chrome 扩展中插入角度元素，以注入我在其中使用的元素inboxSDK（也可以使用 vanilla JS 制作）。问题是输入事件中的意外行为keyup以及角度材料无法正常工作。

例如，<mat-menu>仅在第二次单击时打开，并且输入的matInput指令动画未应用于焦点。该事件的另一个有线问题keyup是某些键未显示在输入端。我看到事件发生了，但是当我检查（空格和 v 等）时输入内的文本没有改变，但是当我检查纯 html 中的角度元素时，一切都按预期工作。在 gmail chrome 扩展程序中有何不同？

为了编译 Angular 元素，我使用了 Medium 网站上的 Angular 6 博客文章这个实用的 web 组件介绍中的说明

附件是我的 Angular 元素代码：

import {
  Component,
  OnInit,
  ViewEncapsulation,
  AfterViewInit
} from '@angular/core';

@Component({
  selector: 'custom-input',
  templateUrl: './custom-input.component.html',
  styleUrls: ['./custom-input.component.css'],
  encapsulation: ViewEncapsulation.Native
})
export class CustomInputComponent implements OnInit, AfterViewInit {


  public text: string = ' ';
  constructor() {
    console.log('construct');
  }

  ngOnInit() {
    console.log('ngOnInit');
  }
  ngAfterViewInit() {
    console.log('ngAfterViewInit')
  }

  onkeyUp(x) {
    console.log(x);
    this.text = x;
  }

}
<mat-form-field class="example-full-width">
  <input  matInput (keyup)="onkeyUp($event.target.value)">
</mat-form-field>


<span style="color: blue;">{{text}}</span>

<!--this is new-->
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';


import { AppComponent } from './app.component';
import { CustomInputComponent } from './custom-input/custom-input.component';
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {MatButtonModule, MatInputModule, MatMenuModule} from "@angular/material";



@NgModule({
  declarations: [
    AppComponent,
    CustomInputComponent
  ],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    MatButtonModule,
    MatMenuModule,
    MatInputModule
  ],
  providers: [],
  entryComponents: [
    CustomInputComponent
  ]
})
export class AppModule {

  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const el = createCustomElement(CustomInputComponent, {injector: this.injector});
    customElements.define('custom-input', el);
  }

}

和扩展代码：

//manifest.json
{
  "name": "angular elements",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "angular elements",
  "icons": {
    "16": "images/16.png",
    "128": "images/128.png"
  },
  "content_scripts": [
    {
      "run_at": "document_start",
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "scripts/content.js"
      ]
    }
  ],
  "permissions": ["<all_urls>"]
}

//content.js

'use strict';

function injectFiles() {
    let url = 'http://127.0.0.1:8080/styles.css';
        let link = document.createElement("link");
        link.href = url;
        link.type = "text/css";
        link.rel = "stylesheet";
        document.getElementsByTagName("head")[0].appendChild(link);

}

function loadjs(file, callback) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = file;
    script.onload = function(){
        callback();
    };
    document.body.appendChild(script);
}

document.addEventListener('DOMContentLoaded', () => {
        injectFiles();
        loadjs('http://127.0.0.1:8080/scripts/webcomponents-bundle.js', function(){
            loadjs('http://127.0.0.1:8080/scripts/framework-poll.js', function(){
             const div = document.createElement('div');
              div.id = 'hello-div';
              div.style.height = '400px';
              div.style.zIndex = "99999999999";
              div.style.width = '400px';
              div.style.background = '#E9EBEE';
              div.style.display = 'block';
              div.style.position = 'absolute';
              div.style.bottom = "-60px";
              div.style.right = "0";
              document.body.appendChild(div);

              let elem = document.getElementById('hello-div');
              elem.insertAdjacentHTML('beforeend', '<custom-input><custom-input/>')
            });
        });
});

根据我的检查，当我在没有 inboxsdk 的其他网站上使用扩展程序时，会发生输入事件的行为。双向绑定也停止工作。

4

0 回答 0