Question

我正在尝试创建Facebook分享按钮，

组件，

  ngOnInit() {
        this.WebURL = this.domSanitizer.bypassSecurityTrustResourceUrl(this.data.url);
        this.facebookURL = this.domSanitizer.bypassSecurityTrustResourceUrl("https://www.facebook.com/sharer/sharer.php?u="+this.WebURL);
  }    

  socialTab(link){
    window.open(
        link,
        '_blank' 
    );   
  }

HTML，

<md-menu #socialButton="mdMenu" >
    <button md-menu-item (click)="socialTab(facebookURL)">
        <img src="app/assets/images/facebook.png"/>
    </button>
</md-menu>

但是此代码会触发错误，

SafeValue必须使用[property] = binding：

我也尝试过这种方式，但是没有成功并且出现上述错误

组件

  ngOnInit() {
        this.WebURL = this.domSanitizer.bypassSecurityTrustResourceUrl(this.data.url);
        this.facebookURL = this.domSanitizer.bypassSecurityTrustResourceUrl("https://www.facebook.com/sharer/sharer.php?u="+this.WebURL);
  }    

  socialTab(link){
      if(link == 'fb'){
        window.open(
            this.facebookURL,
            '_blank' 
        );  
      }
  }

HTML

<md-menu #socialButton="mdMenu" >
    <button md-menu-item (click)="socialTab('fb')">
        <img src="app/assets/images/facebook.png"/>
    </button>
</md-menu>

有人请建议我解决这个问题。谢谢。

Answer 1

使用DomSanitizer

没有意义

  window.open(
        this.facebookURL,
        '_blank' 
    );

仅需要通过Angular向DOM添加HTML或样式。

错误可能是因为

(click)="socialTab(facebookURL)"

传递已清理的值，而不是使用

将其添加到DOM中

<div [innerHTML]="someSanitizedValue"

清理将值包装在另一个类型中，以便Angular可以在它实际将其添加到DOM之前检查它是否已被清理（显式声明为安全）。

window.open(与Angular无任何关系，它也需要一个不是SafeUrl或类似的字符串。

Angular：如何处理“SafeValue必须使用[property] = binding：”错误与（click）事件？

1 个答案: