HTML流的Angular属性 [英] Angular attribute for HTML stream
问题描述
我正在尝试将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-browser"导入{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屋!