HTML流的Angular属性 [英] Angular attribute for HTML stream

查看:86
本文介绍了HTML流的Angular属性的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试将cloudflare流中的视频添加到我的网站中.cloudflare提供的代码在html中运行,但是当我将代码粘贴到我的角度项目的html组件中时.我遇到了错误-

错误:模板解析错误:流"不是一个已知元素:1.如果"stream"是Angular组件,则请验证它是否是此模块的一部分.2.要允许任何元素,请在此组件的"@ NgModule.schemas"中添加"NO_ERRORS_SCHEMA".([错误->]

在html中工作的代码如下

 < stream src ="6aaee8579a7a ************"自动播放静音的预加载</stream< script data-cfasync ="false" defer =" type ="text/javascript" src ="https://embed.cloudflarestream.com/embed/r4xu.fla9.latest.js?video=6aaee8579a7a************></script> 

现在这真的是一个POC,而我本人并不真正了解棱角,只是尝试学习.有人可以指导我找到应该分类的正确材料吗?

解决方案

您可以执行以下步骤将cloudflare流添加到Angular组件中:

1 .将流标签添加到所需的组件中.

app.component.html

 < stream src ="5d5bc37ffcf54c9b82e996823bffbb81"控件</stream> 

2 .现在,您的 AppModule (假设您的组件属于 AppModule )应该是这样的:

app.module.ts

 从'@ angular/core'导入{NgModule,NO_ERRORS_SCHEMA};从"@ angular/platform-b​​rowser"导入{BrowserModule};从"@ angular/forms"导入{FormsModule};从'./app.component'导入{AppComponent};从'./hello.component'导入{HelloComponent};@NgModule({导入:[BrowserModule,FormsModule],声明:[AppComponent,HelloComponent],模式:[NO_ERRORS_SCHEMA],//<-您需要添加此行引导程序:[AppComponent]})导出类AppModule {} 

3 .现在将cloudflare javascript库添加到您的 index.html

 < html><身体>< my-app>正在加载</my-app></body>< script src ="https://embed.cloudflarestream.com/embed/r4xu.fla9.latest.js" id ="video_embed" defer =" async ="></script></html> 

您可以在此处找到有效的 stackblitz 演示

I am trying to add a video from cloudflare stream into my website. The code that cloudflare gives runs in html but when I paste the code in the html component of my angular project. I am getting the error -

Error: Template parse errors: 'stream' is not a known element: 1. If 'stream' is an Angular component, then verify that it is part of this module. 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" [ERROR ->]

The code that works in html looks like this

    <stream src="6aaee8579a7a************" autoplay muted preload></stream>
    <script data-cfasync="false" defer="" type="text/javascript" src="https://embed.cloudflarestream.com/embed/r4xu.fla9.latest.js?video=6aaee8579a7a************"></script>

Now this is really a POC, and I myself dont really know angular, just trying to learn. Could someone please direct me to the correct material that I should look into to sort this?

解决方案

You can do the following steps to add cloudflare stream to your Angular component:

1. Add the stream tags to your required component.

app.component.html

<stream src="5d5bc37ffcf54c9b82e996823bffbb81" controls></stream>

2. Now your AppModule (assuming your component belongs to AppModule) should be like this:

app.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  schemas: [ NO_ERRORS_SCHEMA ], // <- You need to add this line
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

3. Now add the cloudflare javascript library to your index.html

<html>
  <body>
    <my-app>loading</my-app>
  </body>

  <script src="https://embed.cloudflarestream.com/embed/r4xu.fla9.latest.js" id="video_embed" defer="" async=""></script>  
</html>

You can find the working stackblitz demo here

这篇关于HTML流的Angular属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆