相关疑难解决方法(0)

由于升级到最新的Angular 2发布候选版本,我的img标签引发了错误.

img标签:

<img class='photo-img' [hidden]="!showPhoto1" src='{{theMediaItem.photoURL1}}'>

生成浏览器错误:

http://veeu-images.s3.amazonaws.com/media/userphotos/116_1464645173408_cdv_photo_007.jpg

网址的价值是:

import {DomSanitizationService} from '@angular/platform-browser';

@Component({
  templateUrl: 'build/pages/veeu/veeu.html'
})
export class VeeUPage {
  static get parameters() {
    return [[NavController], [App], [MenuController], [DomSanitizationService]];
  }

  constructor(nav, app, menu, sanitizer) {

    this.app = app;
    this.nav = nav;
    this.menu = menu;
    this.sanitizer = sanitizer;

    this.theMediaItem.photoURL1 = this.sanitizer.bypassSecurityTrustUrl(this.mediaItems[1].url);
  }

编辑:

我已经尝试过在另一个解决方案中提出的建议,这个问题应该是重复的,但我得到了同样的错误.

我已将以下代码添加到控制器:

<img class='photo-img' [hidden]="!showPhoto1" [src]='theMediaItem.photoURL1'>

我仍然收到相同的错误消息.

EDIT2:

我还将html更改为:

<img class='photo-img' [hidden]="!showPhoto1" src='{{theMediaItem.photoURL1}}'>

我仍然得到相同的错误消息

我正在尝试做的angular 2.1.0是动态创建应该注入父组件的子组件.例如父组件是lessonDetails包含用于所有课程如像按钮共享的东西Go to previous lesson,Go to next lesson和其他东西.基于路径参数,应该是子组件的课程内容需要动态注入父组件.子组件的HTML(课程内容)在外面的某处定义为普通字符串,它可以是以下对象:

export const LESSONS = {
  "lesson-1": `<p> lesson 1 </p>`,
  "lesson-2": `<p> lesson 2 </p>`
}

通过innerHtml在父组件模板中使用类似的内容,可以轻松解决问题.

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

在路径参数的每次更改的情况下lessonContent,父组件的属性将改变(将从LESSON对象获取内容(新模板)),从而导致更新父组件模板.这有效,但角度不会处理通过注入的内容,innerHtml因此无法使用routerLink和其他东西.

在新的角度释放之前,我使用来自http://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2/的解决方案解决了这个问题,我一直在使用ComponentMetadata它ComponentResolver来动态创建子组件, 喜欢:

const metadata = new ComponentMetadata({
  template: this.templateString,
});

当templateString传递给子组件的Input属性为子组件.双方MetaData并ComponentResolver已被弃用/去掉angular 2.1.0. …

我有一组运行 iOS 9.3.5 的 iPad（第 3 代）。这是他们支持的最高水平。我正在尝试用等效的 Web 应用程序替换自定义 iOS 应用程序的功能。该站点是用 Angular 11 构建的，目标是es2015，并且我已经在浏览器支持文件中声明了 iOS > 9。该网站的大部分内容与我对此类旧设备的预期完全相同。整个事情的关键是这个需要填写的第三方表单，它作为 iframe 提供，它的表现如此，非常糟糕。

这是带有 iframe 的组件 HTML 代码（出于隐私原因更改了 URL）：

<div class="row header"><a class="restart" (click)='restart()'>Start Over</a><a routerLink='/welcome'><i class="fa fa-times close-x"></i></a></div>
<iframe src="https://notarealsite.com" (load)="waiverLoaded()"></iframe>

该waiverLoaded函数是一个简单的布尔翻转，用于检测嵌入页面在完成后重新加载，以便我可以路由到我的应用程序中的不同组件。如果 iframe 是页面上的唯一元素，则性能不变。嵌入时运行良好的其他页面不会像弃权那样遭受性能下降，因此我必须假设它是弃权页面的代码中的某些内容。

原始的自定义 iOS 应用程序使用 webviewer 加载页面，加载时间为 2 秒或更短。直接在 Safari 中访问页面可以看到相同的性能。在这两种情况下，考虑到设备的使用年限，动态形式的响应能力是合理的。当通过 iframe 加载页面时，性能坦克。我们正在谈论 30-45 秒的加载，有时在点击按钮或字段和表单反应之间长达一整秒的延迟。

我已将设备连接到我的计算机并使用 MacOS Safari 中的远程检查器查看时间线。大部分初始加载时间是表单使用的几个 1-2 kb 图像文件，如滚动条和一些图标。通常这些项目之一最终需要 20-25 秒。当与表单交互时，时间线中会出现一个 XML 资源，每次字段更改或按钮按下时都会出现，这需要大约一两秒钟才能使页面再次更新。

我不太精通像这样的 Web 应用程序性能故障排除，这是我构建的第一个真正的 Angular 应用程序，所以我可能会遗漏一些非常明显的东西。是什么导致直接访问的页面与放置在 iframe 中的页面之间的性能差异？

一些额外的信息：

• 通过本地运行npm serve …

正如人们总是说没有一个被称为愚蠢问题的问题.

我现在正在学习Angular 2.0官方教程.正如我从packageconfig文件中看到的那样,它正在使用rc2.0.我试图压制框架工作抱怨iFrame标签中的"不安全"网址.

我已经检查了此Stack Overflow Question中的指令, 并按照LIVE Plunker中显示的所有内容进行操作.

我的VS代码在编译时没有抱怨任何内容,但是从Chrome检查器我可以看到错误.

以下是我项目的TS文件.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute }       from '@angular/router';
import { ParcelsService } from './parcels.service';
import { SafeResourceUrl, DomSanitizationService } from '@angular/platform-browser';
import { Parcel } from './mock-parcels';
@Component({
  template: `
  <h2>Parcels</h2>
  <div *ngIf="parcel">
    <h3>"{{parcel.checkUrl}}"</h3>
    <iframe width=800 height=500 src="{{safeUrl}}}"></iframe>

    <p>
      <button (click)="gotoHeroes()">Back</button>
    </p>
  </div>
  `,
  providers:[ParcelsService, DomSanitizationService]
})
export class HeroDetailComponent implements OnInit, OnDestroy  {
  parcel: Parcel;
  safeUrl : SafeResourceUrl;
  private sub: …

从'@ angular/core'导入{Component};

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
<iframe src="http://hssa:1021/Home?testRequestId=+[testRequestId]+" allowfullscreen></iframe>`,
})
export class AppComponent  {
    name = 'Angular';
    testRequestId = '3224';

}

我有上面提到的.ts文件.如何将testRequestId传递给html.

我希望将Unity WebGL项目集成到Angular2应用程序中。将所有这些脚本移至Angular2组件的正确方法是什么？

首先，Unity WebGL像这样导出index.html：

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | Espoo web manager (Prefab preview)</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <script src="TemplateData/UnityProgress.js"></script>  
    <script src="Build/UnityLoader.js"></script>
    <script>
      var gameInstance = UnityLoader.instantiate("gameContainer", "Build/builds.json", {onProgress: UnityProgress});
    </script>
  </head>
  <body>
    <div class="webgl-content">
      <div id="gameContainer" style="width: 960px; height: 600px"></div>
      <div class="footer">
        <div class="webgl-logo"></div>
        <div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
        <div class="title">Espoo web manager (Prefab preview)</div>
      </div>
    </div>
  </body>
</html>

我开始拆分，首先将样式表移动到模板.css文件中：

@import './webgl-app/TemplateData/style.css';

然后，我将javascript移至组件.ts-file中：

import { Component, AfterViewInit } …

我有一个web服务,它生成带有HTML电子邮件内联CSS的HTML,以响应以下URL的POST请求:https://civinky.3sd.io/generate

我在这里构建了一个简单的angular2应用程序http://civinky-demo.3sd.io/,这样人们就可以看到将要生成的HTML.这个想法是你在左侧添加参数并点击按钮.Angular发出一个帖子请求并在右侧显示结果.iframe中生成的HTML的预览以及下面div中的原始html.

这是服务:

import { Injectable } from '@angular/core';
import { Http, URLSearchParams }          from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Injectable()
export class CivinkyService {

  url ="https://civinky.3sd.io/generate"

  constructor(private http: Http, private elementRef: ElementRef) { }

  query(pug, css, json) {
    let params = new URLSearchParams()
    params.append('pug', pug)
    params.append('css', css)
    params.append('json', json)
    let body = params.toString()
    let result = this.http.post(this.url, body)
      .map(res => {return {url:res.url,html:res.text().trim()}})
    return result;
  }
}

我正在查询我的组件

import …

我真的不明白我在做错了什么:

模板:

<embed [src]="pdfUrl" width="500" height="100%" type='application/pdf'>

类:

pdfURL;
constructor(private domSanitizer : DomSanitizer) {}
ngOnInit() {
    this.pdfUrl = this.domSanitizer.bypassSecurityTrustUrl('http://example.com/pdf.pdf')
}

这实际上不会加载<embed>但不会抛出错误.

我尝试使用SafeUrltype on pdfURL和with bypassSecurityTrustResourceUrl().该<embed>标签接收正确的URL,但不显示任何内容.

我正在尝试使用下面的组件设置 IFrame 源输入。

由于某种原因它不起作用，没有显示任何网页。如何正确设置输入源？

调用方法：

<app-viewer-iframe-two
    [url1]="'http://www.food.com'"
    [url2]="'http://www.car.com'"
>
</app-viewer-iframe-two>

打字稿：

export class ViewerIframeTwoComponent implements OnInit {

  constructor() { }

  @Input() url1: string;
  @Input() url2: string;
  
  ngOnInit(): void {
  }
}

HTML：

<div class="box">
  <iframe class="iframe-one" src="{{url1}}" frameborder="0"
    scrolling="yes" align="left"> </iframe>
</div>

<div class="box">
  <iframe class="iframe-two" src="{{url1}}" frameborder="0"
    scrolling="yes" align="right"></iframe>
</div>

错误：

没有设置任何来源，

资源：这仅适用于 Angular 1

如何从 AngularJS 中的变量设置 iframe src 属性

我的模拟内存数据库中有youtube链接,我想*来自youtube的这些视频.

   let videos: any[] =[
            {videoURL: "ZOd5LI4-PcM"},
            {videoURL: "d6xQTf8M51A"},
            {videoURL :"BIfvIdEJb0U"}

        ];

像这样.

我使用服务连接我的组件与服务器,现在在HTML中,我已经让v视频.在iframe中,我做到了

<iframe src=v.videoURL></iframe>

但由于它是外部来源,他们告诉我使用Domsanitzer,但我被困在这一部分.

我不知道如何清理应该循环的链接.

constructor( private sanitizer: DomSanitizer) {
    this.sanitizer.bypassSecurityTrustResourceUrl('')

< - 我不知道在这里添加什么.

我使用 Iframe 通过以下方法在 HTML 中设置外部 URL：

方法一：

 <iframe [src]="sanitizer.bypassSecurityTrustResourceUrl(srcUrl)" height="600" width="1000"></iframe>

方法 2：在此方法中，我还使用How to set <iframe src="...">创建了一个安全 PIPE，而不导致 `unsafe value` 异常？

 <iframe width="100%" height="300" [src]="srcUrl | safe"></iframe>

方法三：

 <iframe #iframe height="600" width="1000"></iframe> 
  @ViewChild('iframe') iframe: ElementRef;
ngAfterViewInit() {
    this.iframe.nativeElement.setAttribute('src', this.srcUrl);
}

但没有一个对我有用。我收到以下错误：

拒绝在框架中显示 ''，因为祖先违反了以下内容安全策略指令：“frame-ancestors 'self' ”。

请在以下链接找到我的代码：

https://stackblitz.com/edit/angular-irwasj?file=src%2Fapp%2Fapp.component.html 任何人都可以帮忙吗？

我想单击一个链接，然后在页面上的div中打开它。

这是Stackblitz！

<div class="container">
  <ol>
    <li>
      <a href="www.company.com/projects">projects</a>
    </li>
    <li>
      <a href="www.company.com/tasks">tasks</a>
    </li>
    <li>
      <a href="www.company.com/notifications">notifications</a>
    </li>
    <li>
      <a href="www.company.com/overview">overview</a>
    </li>
  </ol>
</div>

单击链接后，页面应在容器div中打开，没有地址栏。

更新 -如果这些链接在公司内部，则I型框架仍然是正确的方法吗？