角度5:如何显示.ts中的返回值以查看

在简单的HTML和JS中,以下代码运行良好。

// main.js

function videoHTML(videoNumber, trackName, trackType = 'srt') {
    return '<video id="video-js" class="video-js vjs-default-skin" ' +'controls preload="auto" width="640" height="264" ' +'poster="img/' + videoNumber + '.jpg"' +
        'data-setup=\'{"example_option":true}\'>' +
        '<source src="videos/' + videoNumber + '.mp4" type="video/mp4" />' +
        '<track id="video-srt" kind="captions" src="subs/' + trackName + '.' + trackType + '" srclang="it" label="Italian" default></track>' +
        '</video>';
}

// index.html

<script type="text/javascript" src="js/main.js"></script>

但是在Angular 5中,如何将ts文件中的值返回到html视图文件中?见下文:

// abc.component.ts

function videoHTML(videoNumber, trackName, trackType = 'srt') {
        return '<video id="video-js" class="video-js vjs-default-skin" ' +'controls preload="auto" width="640" height="264" ' +'poster="img/' + videoNumber + '.jpg"' +
            'data-setup=\'{"example_option":true}\'>' +
            '<source src="videos/' + videoNumber + '.mp4" type="video/mp4" />' +
            '<track id="video-srt" kind="captions" src="subs/' + trackName + '.' + trackType + '" srclang="it" label="Italian" default></track>' +
            '</video>';
    }
评论
  • Oo晓oO
    Oo晓oO 回复

    在ts文件中,每个参数都有一个变量。然后您将在模板文件中拥有完整的html文件,并执行类似的操作

    @Component({
      selector: "app-hello-world",
      templateUrl: "./hello-world.html",
      styleUrls: ["./hello-world.css"]
    })
    export class HelloWorld implements OnInit {
      title = "Hello World";
    
      ngOnInit() {
      // do something on initialization
      }
    
    }
    

    并在html文件中

    <h1> Hello {{ title }} </h1>
    

    然后每次在代码中更改变量时,html都会自动更新。

  • hculpa
    hculpa 回复

    You can use binding to innerHtml like <div [innerHtml]="videoHTML(videoNumber, trackName)"></div>. Or you can also assign it to a class field if you call function from elsewhere and bind that to innerHtml. But why not use component for it instead? It would be more of angular way of doing it, which I strongly recommend.

    video.component.html

    <video id="video-js" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" [poster]="img/' + videoNumber + '.jpg" data-setup='{"example_option":true}'>
      <source [src]="videos/' + videoNumber + '.mp4" type="video/mp4" />
      <track id="video-srt" kind="captions" [src]="subs/' + trackName + '.' + 
        trackType + '" srclang="it" label="Italian" default></track>
    </video>
    

    Where videoNumber, trackName and trackType would be your input bindings.

  • 99.90%
    99.90% 回复

    如果我清楚地了解您,则您正在尝试返回html字符串。 在角度5中,我建议您将其绑定到变量... 所以我会这样重写你的代码。

    // abc.component.ts

    videoHTML:any;
    
    getVideoHTML(videoNumber, trackName, trackType = 'srt') {
            this.videoHTML = '<video id="video-js" class="video-js vjs-default-skin" ' +'controls preload="auto" width="640" height="264" ' +'poster="img/' + videoNumber + '.jpg"' +
                'data-setup=\'{"example_option":true}\'>' +
                '<source src="videos/' + videoNumber + '.mp4" type="video/mp4" />' +
                '<track id="video-srt" kind="captions" src="subs/' + trackName + '.' + trackType + '" srclang="it" label="Italian" default></track>' +
                '</video>';
        }
    

    然后在您的html文件中... ** abc.component.html

    <div [innerHTML]="videoHTML"></div>
    

    那应该工作。