Question

我的代码有些错误，我正在尝试实现一个隐私共享模块shariff。

我尝试过这些并且都不起作用：

[attr.data-url]="text"

attr.data-url="{{text}}"

我正在尝试将当前url数据绑定到shariff标记，但它在ngOnit标记完成遍历observable之前解析，导致url只是“https://client.wildfyre.net/”，当它应该是“ https://client.wildfyre.net/areas/ AREA / ID “我不知道如何解决问题

home.comp.html

<div class="shariff" data-lang="en" data-orientation="vertical" data-services="[&quot;facebook&quot;,&quot;googleplus&quot;,&quot;twitter&quot;]" data-theme="white" data-title="WildFyre" [attr.data-url]=text></div>

home.comp.ts

    import { Component, OnInit } from '@angular/core';
    import { Response } from '@angular/http';
    import { Post, Area, Reputation } from '../_models';
    import { PostService, AreaService } from '../_services';

    @Component({
      templateUrl: 'home.component.html',
    })
    export class HomeComponent implements OnInit {
      post: Post;
      rep: Reputation;
      model: any = {};
      color = 'warn';
      checked: boolean;
      isCopied = false;
      text = 'https://client.wildfyre.net/';

      constructor(
        private postService: PostService,
        private areaService: AreaService
      ) {
        this.checked = this.areaService.isAreaChecked;

        this.areaService.getAreaRep(this.areaService.currentAreaName)
          .subscribe(reputation => {
            this.rep = reputation;
        });
      }

      ngOnInit() {
        document.getElementById('navB').style.display = '';

        this.postService.getNextPost(this.areaService.currentAreaName)
          .subscribe((post: Post) => {
            this.post = post;
            this.text = 'https://client.wildfyre.net/areas/' + this.areaService.currentAreaName + '/' + post.id;
          });
      }

Answer 1

我认为这不是Angular问题，但是您使用的非Angular小部件的问题取决于data-url属性。

尝试

#shariff [attr.data-url]="text"

@ViewChild('shariff') shariff:ElementRef;

ngOnInit() {
   ...

   this.text = 'https://client.wildfyre.net/areas/' + this.areaService.currentAreaName + '/' + post.id;
   new Shariff(shariff.nativeElement, {
     orientation: 'vertical'
   });

插值数据不起作用

1 个答案: