无法绑定到“配置”，因为它不是角度 8 中“maphilight”错误的已知属性

Posted 2023-05-09

技术标签:

【中文标题】无法绑定到“配置”，因为它不是角度 8 中“maphilight”错误的已知属性【英文标题】：Can't bind to 'config' since it isn't a known property of 'maphilight' error in angular 8 【发布时间】：2020-04-10 22:37:07 【问题描述】：

我正在使用 angular 8，我想使用 maphilight 在图像映射中选择一个预定义的部分，例如（鼻子，眼睛，...）：

我已经使用这个命令安装了 maphilight >>> npm i ng-maphilight --save 在我的 app.module.ts 中，我已将 MaphilightModule 添加到导入数组中。在我的组件 (html) 中，maphilight 地图被添加为容器元素

 <div class="body-img">
    <maphilight
            id="statesMap"
            [hidden]="hidden"
            [config]="config"
          >
            <img src="../../assets/image1.png" class="map"  usemap="#bodyChart" >

            <span *ngFor="let c of bodyAreas; let pickIndex=index; let count=index">
                <span *ngIf="c.picked" (click)="pick(pickIndex)" class="pick-span"
                    [ngStyle]="c.style"> c.title  </span>
            </span>
        <map name="bodyChart" >
            <area *ngFor="let c of bodyAreas; let areaIndex=index" [title]="c.title" [alt]="c.alt" [shape]="c.shape" [coords]="c.coords" (click)="pick(areaIndex)" />
        </map>
    </maphilight>
  </div>

在 myComponent (ts) 中，我使用了 maphilightComponent 如下 >>

@ViewChild(MaphilightComponent, static: false) maphilightComponent: MaphilightComponent;
hidden = false
  public config = 
    fade: true,
    alwaysOn: false,
    neverOn: false,

    // fill
    fill: true,
    fillColor: '#ffffff',
    fillOpacity: 0.4,

    // stroke
    stroke: true,
    strokeColor: '#4d0ec0',
    strokeOpacity: 1,
    strokeWidth: 1,

    // shadow:
    shadow: true,
    shadowColor: '#000000',
    shadowOpacity: 0.8,
    shadowRadius: 10
  

 ngAfterViewInit() 
    // Make sure image is initially visible while maphilight.js loads (and *then* hide it).
    // Otherwise the $(img).height() in maphilight.js may return 0, which causes mouseover effect to break.
    // See also:
    // - https://***.com/questions/1472303/jquery-get-width-of-element-when-not-visible-display-none
    // - https://***.com/questions/2345784/jquery-get-height-of-hidden-element-in-jquery
    this.maphilightComponent.events.imgLoaded.subscribe(() => 
      console.log("img.$(this.img).height()=", window.jQuery(this.maphilightComponent.img).height())
      //this.hidden = true
    )
    this.maphilightComponent.events.updateMaphilight.subscribe(() => 
      console.log('updateMaphilight')
    )

我有这个错误

未捕获的错误：模板解析错误：无法绑定到“配置”，因为它不是“maphilight”的已知属性。 (" id="statesMap" [隐藏]="隐藏" [错误->][配置]="配置" > [错误->]）在 JitCompiler._compileComponents (:4200/vendor.js:108430) 在：4200/vendor.js:108343 在 Object.then (:4200/vendor.js:84703) 在 JitCompiler._compileModuleAndComponents (:4200/vendor.js:108342)

请给点建议。

【问题讨论】：

你能创建一个stackblitz来重现这个问题吗您是否已将此行添加到您的模块中？ import MaphilightModule from 'ng-maphilight'? @F***Schmidt 是的，它已导入我的组件。我错过了任何配置吗？ @Kamilia 你找到解决方案了吗？谢谢 【参考方案1】：

我认为你应该使用ng-maphilight而不是仅仅使用maphilight，安装命令如下