Angular4 Select选择改变事件的方法

Posted 2023-04-16

参考技术A 个人感觉change没用。
所以用的ngModelChange
<select
class="form-control
customSelect"
[(ngModel)]="packagingType"
name="packagingType"
(ngModelChange)="packagTypeChange()">
<option
*ngFor="let
type
of
packagingTypes"
value="type.value"
#packagingtype>
type.key
</option>
</select>
以上这篇Angular4
Select选择改变事件的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:angularjs实现下拉列表的选中事件示例Angular2中select用法之设置默认值与事件详解angular
select
默认值设置方法AngularJs
ng-change事件/指令的用法小结Angular
中
select指令用法详解AngularJS
Select(选择框)使用详解

Angular mat-select 和 webpack 模块联合事件问题

【中文标题】Angular mat-select 和 webpack 模块联合事件问题

【英文标题】：Angular mat-select and webpack module federation event problem

【发布时间】：2021-08-09 03:32:52

【问题描述】：

我在 MonoRepo 中有两个 Angular 应用，一个外壳应用和一个内容应用。 shell 应用就像一个显示卡片的登陆页面，点击它，内容应用就会显示出来。

在这个内容应用程序中，我使用了一个垫选择控件，它不会在外部单击时关闭面板 -> 问题！ 外壳应用程序似乎捕获了外部单击事件。 如果我在 shell 应用程序中使用 mat-select，一切正常。

这是我的 shell webpack 配置：

const webpack = require("webpack");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = 
  output: 
    publicPath: "http://localhost:4200/",
    uniqueName: "home",
  ,
  optimization: 
    runtimeChunk: false,
  ,
  plugins: [
    new ModuleFederationPlugin(
      shared: 
        "@angular/core":  eager: true, singleton: true ,
        "@angular/common":  eager: true, singleton: true ,
        "@angular/router":  eager: true, singleton: true 
      ,
    ),
  ],
;

内容 webpack 配置：

const webpack = require("webpack");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = 
  output: 
    publicPath: "http://localhost:4201/",
    uniqueName: "contentModul"
  ,
  optimization: 
    runtimeChunk: false,
  ,
  plugins: [
    new ModuleFederationPlugin(
      name: "content",
      library:  type: "var", name: "content" ,
      filename: "remoteEntry.js",
      exposes: 
        ContentModule:
          "./projects/content/src/app/content/content.module.ts",
      ,
      shared: 
        "@angular/core":  eager: true, singleton: true ,
        "@angular/common":  eager: true, singleton: true ,
        "@angular/router":  eager: true, singleton: true 
      ,
    ),
  ],
;

这里是我的路由：

    import  NgModule  from "@angular/core";
    import  Routes, RouterModule  from "@angular/router";
    import  HomeComponent  from "./home/home.component";
    import  PageNotFoundComponent  from "./static-pages/page-not-found/page-not-found.component";
    import  loadRemoteModule  from "./utils/federation-utils";
    
    const routes: Routes = [
       path: "", redirectTo: "home", pathMatch: "full" ,
       path: "home", component: HomeComponent ,
      
        path: "content",
        loadChildren: () =>
          loadRemoteModule(
            remoteName: "content",
            remoteEntry: "http://localhost:4201/remoteEntry.js",
            exposedModule: "ContentModule",
          ).then((m) => m.ContentModule)
      ,
       path: "**", component: PageNotFoundComponent 
    ];

@NgModule(
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
)
export class AppRoutingModule 

您知道遗漏/错误的地方吗？

谢谢！

【参考方案1】：

我遇到了完全相同的问题。我遇到的问题与 Angular 模块的导入有关。我在我的微前端中导入了 Angular 的 BrowserModule，这是错误的。这个模块应该只在你的 shell 应用程序的根模块中被导入。

微前端应该只导入CommonModule。如果您改为导入 BrowserModule，这将破坏 Angular 运行时并导致错误，例如未正确捕获事件。