找不到管道“safeResourceUrl”

2023-12-14

由于我正在尝试将 YouTube 视频动态嵌入到我的 Angular 2 应用程序中,因此正在努力解决一些安全错误。在这里找到了关于使用 Pipe 来清理 url 的答案。

但是遇到这个当前错误。

找不到管道“safeResourceUrl”

enter image description here

SafeResourceUrl.pipe.ts

import { Pipe } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({name: 'safeResourceUrl'})
export class SafeResourceUrl {
    constructor(private sanitizer:DomSanitizer){}

    transform(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

我已将其导入到我的 app.module 中

import { NgModule } from '@angular/core';
import { HomeModule } from './home/home.module';
import { SharedModule } from './shared/shared.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SafeResourceUrl } from './shared/pipes/saferesourceurl.pipe';

@NgModule({
    declarations: [
        AppComponent,
        SafeResourceUrl
    ],
    imports: [
        SharedModule,
        HomeModule,
        AppRoutingModule
    ]
})

并导入到我的 home.component.ts 中

import { SafeResourceUrl } from '../shared/pipes/saferesourceurl.pipe';

home.component.html 的标记

<div class="container col-lg-3 col-md-6 col-sm-12" *ngFor="let card of category.categorycards">
<div class="thumbnail">
    <a href="/wiki/entity" *ngIf="card.type == 'image'">
        <div class="image-wrap">
            <img [src]="card.graphic" class="img-responsive" alt="[card.title]" title="[card.title]">
        </div>
    </a>

    <a href="/wiki/category" *ngIf="card.type == 'video'">
        <div class="image-wrap">
            <iframe title="YouTube video player"
                    class="youtube-player" type="text/html" 

                    [src]="card.url | safeResourceUrl"

                    height="100%" width="100%" frameborder="0"></iframe>
        </div>
    </a>

管道无法在全球范围内提供。无论在哪里使用它们,都需要导入它们,就像组件或指令一样。

@NgModule({
    declarations: [
        SafeResourceUrl
    ],
    imports: [
      CommonModule
    ]
})
class SharedModule {
@NgModule({
    declarations: [
      CommonModule,
      HomeComponent,
    ],
    imports: [
        SharedModule,
    ]
})
class HomeModule
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

找不到管道“safeResourceUrl” 的相关文章

  • 在Javascript中按降序对字符串进行排序(最有效)?

    W3Schools 有这个例子 var fruits Banana Orange Apple Mango fruits sort fruits reverse 这是在 Javascript 中按降序对字符串进行排序的最有效方法吗 Updat
  • 消息“在 jest.setTimeout 指定的 5000 毫秒超时内未调用异步回调”

    我正在使用 Puppeteer 和 Jest 来运行一些前端测试 我的测试如下 describe Profile Tab Exists and Clickable settings user gt test Assert that you
  • jQuery 选择 # id 以单词为前缀,计数器为后缀

    有没有办法用 jQuery 选择所有带有前缀 my 和后缀 0 9 的 id 像这样的 my 1 4 还是可以用循环来实现 div div div div div div div div div div 第一个想法 似乎效果很好 div i
  • 动画进度元素值

    我有一个progress元素 该元素如下所示 div class container div div div
  • Leaflet js虚构地图

    我是 Leaflet 的新手 我想了解如何创建完全交互式的虚构地图 我有一张图像想要转换为传单地图 该图像基本上像图表一样具有许多连接和点 我想首先将该图像转换为地图 能够将鼠标悬停在这些点上 突出显示它们并显示有关它们的信息 并且还可以在
  • jquery window.open 在 ajax 成功中被阻止

    尝试在我的 ajax 成功调用中打开一个新的浏览器窗口 但是 它被阻止为弹出窗口 我做了一些搜索 发现用户事件需要绑定到 window open 才能避免这种情况发生 我还找到了这个解决方案 您可以在 ajax 之前打开一个空白窗口 然后在
  • 仅一页 JavaScript 应用程序

    您是否尝试过单页 Web 应用程序 即浏览器仅从服务器 获取 一页 其余部分由客户端 JavaScript 代码处理 此类 应用程序页面 的一个很好的例子是 Gmail 对于更简单的应用程序 例如博客和 CMS 使用这种方法有哪些优点和缺点
  • 如何流式传输 OpenAI 的完成 API?

    我想流式传输结果通过 OpenAI 的 API 完成 https beta openai com docs api reference completions 该文档提到使用服务器发送的事件 https developer mozilla
  • 如何在 Angular 中从父组件访问子组件?

    I have mat paginator在子组件a中 如下所示 子组件 html
  • 使用 JS 合并具有相同值的相邻 HTML 表格单元格

    我已经为此苦苦挣扎了一段时间 我有一个根据一些 JSON 数据自动生成的表 该数据可能会有所不同 我想合并第一列中具有相同值的相邻单元格 例如此表中的 鱼 和 鸟 table tr td fish td td salmon td tr tr
  • 如何在jquery中获取保存时间和当前时间的差异?

    我想在 javascript 或 jquery 中获取保存时间和当前时间之间的时差 我节省的时间看起来像Sun Oct 24 15 55 56 GMT 05 30 2010 java中的日期格式代码如下 String newDate 201
  • JavaScript 代码在不使用 ActiveX 的情况下截取网站屏幕截图

    我有一个用户与之交互的 JavaScript 应用程序 我需要保存当前界面的外观 裁剪出我需要的部分 或者通过指定div只拍摄我需要的部分 然后发送回服务器 显然任何外部服务都无法做到这一点 我需要一个 JavaScript 或Flash
  • 如果数字小于 10,则显示前导零 [重复]

    这个问题在这里已经有答案了 可能的重复 JavaScript 相当于 printf string format https stackoverflow com questions 610406 javascript equivalent t
  • 如何将函数内的捕获错误传递给父级

    我有这几行代码示例 想知道下面的逻辑到底如何 try var response child console log why here catch err console log should show this err function c
  • JavaScript onresize 事件多次触发

    我在尝试仅在触发 onresize 事件时运行一次函数时遇到一些麻烦 我已经看过这个问题DOM onresize 事件 https stackoverflow com questions 1500312 javascript onresiz
  • 数据表日期范围过滤器

    如何添加日期范围过滤器 like From To 我开始进行常规搜索和分页等工作 但我不知道如何制作日期范围过滤器 我正在使用数据表 1 10 11 版本 My code var oTable function callFilesTable
  • 单击引导分页链接时调用 jquery 函数

    我想在单击引导分页链接时调用 jquery 函数 假设我想从第1页遍历到第2页 应该调用一个jquery函数 我正在使用以下代码 但它不起作用 ul pagination on click li function alert page ch
  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react
  • 使用异步调用时如何从 javascript 更新元刷新?

    我有一个系统 它使用元刷新来注销页面 该系统会在空闲用户后进行清理 不用担心 服务器也会导致会话超时 我开始通过 ajax 进行一些操作 不是真正的 xml 但这不是重点 我可以运行从异步请求返回的javascript 所以我想知道是否可以
  • ngmodel与Angular2中复选框的动态数组绑定

    我有一个 Angular 2 组件 其中我从数组生成复选框列表 现在我需要根据选中的复选框填充不同的数组 这应该是双向绑定 这意味着如果复选框的值已在数组中 则必须已经检查了复选框 我在 Angular 1 中使用了一个名为 checkli

随机推荐

  • 带有 boost 变体递归包装器的字符串解析器

    下面的代码 改编自spirit qi mini xml示例 无法编译 存在与规则相关的错误brac具有递归的属性boost variant 然而 所有注释掉的版本brac进行编译 我很好奇是什么让简单的字符串解析器在这种情况下如此特别 in
  • 删除 showModalDialog API

    随着即将拆除showModalDialog来自各种浏览器的 API 我们公司像许多其他提供的公司一样大型企业 Web 应用程序现在面临着一个重大的困境 虽然我们已将呼叫集中到showModalDialog由于只有 3 行代码 我们广泛依赖此
  • js中通过窗口名称进行窗口到窗口通信

    有谁可以给 我一些关于如何使用 javascript 处理窗口到窗口通信的想法 因为这两个窗口没有父子关系 基本上另一个窗口是使用 window open 方法打开的 任何精彩的信息都将受到高度赞赏 假设如下 windowHandle wi
  • 由于 R 中的大整数日期时间,线性模型奇异?

    日期随机正态的简单回归失败 但使用小整数而不是日期的相同数据可以按预期工作 Example dataset with 100 observations at 2 second intervals set seed 1 df lt data
  • 如何在 MySQL 中使用命令行导入 SQL 文件?

    我有一个 sql导出的文件phpMyAdmin 我想使用命令行将其导入到不同的服务器中 我有一个Windows Server 2008R2安装 我把 sql文件上的C drive 我尝试了这个命令 database name lt file
  • 使用 C# 将 Word 文件(.docx 和 doc)转换为 .pdf 不起作用

    我正在使用 Visualstudio 2010 我正在尝试将 word docx 文件转换为 pdf 文件 并且在本地工作正常 但在服务器上运行时显示错误为 Could not load file or assembly office Ve
  • WooCommerce 价格覆盖不起作用

    我已经使用设置了一个隐藏的输入项woocommerce before add to cart button hook function add gift wrap field gt
  • 在R闪亮的页面加载时调用javascript函数

    我添加了对 css 和 javascript 文件的引用 如下所示 tags link rel stylesheet type text css href rtp css tags script type text javascript s
  • QOpenGLWidget更新如何不会导致paintGL事件?

    我正在记录呼叫update and paintGL 但不知何故 只发生更新 PaintGL 被调用了几次 然后就再也没有调用过 这怎么可能 窗口是可见的并且isVisible 每次都返回 Trueupdate 叫做 具体来说 我从QGLWi
  • Ghub 脚本:向下拖动鼠标并按鼠标左键(LUA)自动点击

    所以基本上我试图使用 Ghub Lua 脚本机制来解释标题中的内容 发布下面我所拥有的代码 EnablePrimaryMouseButtonEvents true function OnEvent event arg if IsKeyLoc
  • java中的单词高亮显示

    我想针对特定的情况突出显示这些词time 就像卡拉 OK 应用程序一样 每个单词都有一个特定的突出显示时间 我可以计时 但不知道在哪里 如何在特定的持续时间内突出显示一个单词 在 stackoverflow 和 google 上搜索了很多
  • 在 Azure Function 中安装 Powershell 模块

    我将 Azure Function 2 0 与 Powershell 结合使用 并在安装 Powershell 模块时出现以下错误 有什么办法可以消除这个错误 一般来说 我们不需要管理员权限来安装 NuGet 依赖项 I also trie
  • Reactjs:意外的标记“<”错误

    我刚刚开始使用 Reactjs 正在编写一个简单的组件来显示 li标记并遇到此错误 意外的标记 我已将示例放在下面的 jsbin 中http jsbin com UWOquRA 1 edit html js 控制台 输出 请让我知道我做错了
  • 获取所有打开的 Excel 文档

    我需要使用自己的数据创建 xls 文件 但文件可能已被创建并由用户打开 1 如果文件不存在 新的应用程序类 工作簿 Add 另存为 2 如果文件存在且未打开 没问题 转到 1 3 如果文件存在并且被用户打开 需要找到它的工作簿并修改工作表的
  • PyQT:旋转 QLabel,使其定位在对角线上而不是水平定位

    我正在开发一个触摸屏应用程序 其中图形用户界面空间非常紧张 我想稍微旋转 QLabel 使其垂直或在对角线上稍微偏移 有什么建议么 我在 QLabel 界面上找不到任何相关内容 非常感谢 QLabel不这样做 但您可以轻松创建自己的包含一些
  • 使用 CSS3 过渡对不可设置动画的属性进行动画处理

    在我的应用程序中 我使用以下内容对页面上元素的不透明度进行动画处理 s transition property opacity transition duration 250ms 当然 有特定于供应商的版本 进而 s hidden opac
  • 标签是 XHTML 中的块级元素吗?

    我知道在HTML4 0中 p tag 不是块级元素 那么在 XHTML 1 0 中呢 谢谢 这是HTML4 0的参考http www w3 org TR html401 struct text html P 元素代表一个段落 它不能包含块级
  • 面向非美国开发者的 Paypal Android SDK

    我是一名非美国开发人员 正在构建一个也可以在美国境外运行的 Android 应用程序 我搜索了一段时间有关 Android SDK 何时在美国境外可用的信息 但没有找到任何信息 我正在寻找一种将 Paypal 支付与我的应用程序集成的方法
  • Unix 文件名中应限制哪些字符?

    考虑一个Save As带有自由文本条目的对话框 用户可以在其中输入文件名作为自由文本 然后单击Save按钮 然后 软件会验证文件名 如果名称有效则保存文件 在 Unix 文件系统上 验证中应应用哪些规则 以后在转义特殊字符等方面操作该名称并
  • 找不到管道“safeResourceUrl”

    由于我正在尝试将 YouTube 视频动态嵌入到我的 Angular 2 应用程序中 因此正在努力解决一些安全错误 在这里找到了关于使用 Pipe 来清理 url 的答案 但是遇到这个当前错误 找不到管道 safeResourceUrl S