标签: renderer

从Angular 2组件访问root html标记

所以问题是,是否可以使用Renderer来调整主要Angular 2应用程序组件之外的标签,比如标签?如果是,那么最好的方法是什么?

让我来介绍一下背景.我正在尝试使用Angular 2构建一个多语言站点,我遇到了一个我无法找到解决方案的问题.问题是我在html标签中使用lang属性来定义网站每个时刻的语言,例如:

<html lang="en"> // When we have English locale active
Run Code Online (Sandbox Code Playgroud)

因此,当用户点击其他语言时,我使用ng2-translate更新网站语言,这非常有效.问题是我需要相应地更新属性,但我无法在Angular 2中找到正确的方法(如果它甚至可能).现在,我直接触摸DOM,但这对我不起作用,因为我需要从中抽象(我也使用Universal,所以我需要服务器端渲染才能工作).

目前,应用程序的样式在此属性上传递(我们支持阿拉伯语,这意味着如果lang ="ar",则更改文本的方向).我想我可以在我的主要组件上使用类或类似的东西,但使用lang属性对我来说似乎是正确的方法.有任何想法吗?

谢谢

html renderer angular

7
推荐指数
1
解决办法
2529
查看次数

在执行一段时间后,Selenium 为所有网站提供“从渲染器接收消息超时”

我有一个应用程序,我需要一个长时间运行的Selenium Web 驱动程序实例(我在无头模式下使用Chrome 驱动程序 83.0.4103.39)。基本上,该应用程序不断从队列中提取 url-data,并将提取的 url 提供给 Selenium,Selenium 应该在网站上执行一些分析。许多这些网站可能已关闭、无法访问或损坏,因此我将页面加载超时设置为 10 秒,以避免 Selenium 永远等待页面加载。
我在这里遇到的问题是,经过一些执行时间(假设 10 分钟)Selenium 开始给出Timed out receiving message from renderer每个 url 的错误。最初它工作正常,它可以正确打开好的网站并在坏网站上超时(网站无法加载),但一段时间后它开始对所有内容超时,即使是应该正确打开的网站(我已经检查过,它们在 Chrome 浏览器上正确打开)。我很难调试这个问题,因为应用程序中的每个异常都被正确捕获。我也注意到这个问题只发生在headless模式中。

  • 更新 *
    在网站分析期间,我还需要考虑 iframe(仅顶级),因此我还添加了一个逻辑来将驱动程序上下文切换到主页中的每个 iframe 并提取相关的 html。

这是应用程序的简化版本:

import traceback
from time import sleep
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By

width = 1024
height = 768

chrome_options = Options()
chrome_options.page_load_strategy …
Run Code Online (Sandbox Code Playgroud)

python iframe selenium renderer selenium-chromedriver

7
推荐指数
1
解决办法
6065
查看次数

浏览器如何重构无效的html结构,有什么规律或方法吗?

笔记:

答案会是这样的..是的..有规则和方法..这取决于收养机构的算法等。你可以按照这些(链接)等和你的简短描述。我不是在寻找任何算法或更多..

例如,如果一个a标签嵌套一个a 标签。chrome 浏览器重组 html 。类似的button标签。两者都是无效的 html 结构

我知道abutton标签都是交互元素。交互元素(a、按钮、输入等)与用户的活动相关。

从评论:

这个问题太宽泛了。

  1. 仅回答以下示例代码或场景。

我认为每个浏览器都应该从某个地方以相同的方式工作......这意味着应该遵循一些基本规则或方法。如果有人发现类似的东西,请提及。

为什么我要找这个?

当我为客户工作时。我发现许多无效的 html 结构。多种类型的html结构。有时我需要重新设计无效的 html 结构。我想我需要了解浏览器重构的概念以进行进一步的 Web 开发。

遵循这些问题 Q1Q2

 let aTag = document.querySelectorAll('a')
    let buttonTag = document.querySelectorAll('button')
   
 console.log('===a tag===')
    aTag.forEach(function(item){
         console.log(item)
    })
     console.log('===button tag===')

      buttonTag.forEach(function(item){
         console.log(item)
    })
Run Code Online (Sandbox Code Playgroud)
 .card{
      display: flex;
      flex-direction: column;
      padding: 10px;
      border: 1px solid slateblue;
       width: 200px;
      text-align: center;
 }
Run Code Online (Sandbox Code Playgroud)
<a href="" class="parent a-tag">
    <div class="card">
        <h4>Title</h4>
        <p>Paragraph</p>
        <button>Add to …
Run Code Online (Sandbox Code Playgroud)

html javascript browser dom renderer

7
推荐指数
1
解决办法
373
查看次数

如何在我的反应测试中模拟状态和数据的值

我正在为我的反应页面编写测试,但我的页面在其状态下使用 isLoading,加载页面时呈现“正在加载”,加载但没有数据(来自获取请求)呈现“未找到数据”,并且加载时呈现“未找到数据”数据(来自获取请求)加载欢迎页面。

我想编写一个测试来检查在以下情况下显示预期文本:

  • 页面已加载但未找到数据
  • 页面已加载并有数据

我想我已经成功地没有数据测试正常工作,但是当我尝试模拟它返回的数据时,我收到了错误消息。错误信息是

TypeError: Cannot read property 'map' of undefined
Run Code Online (Sandbox Code Playgroud)

但我不确定为什么我的模拟数据是 data: orders > 其中包含数据,因此不应未定义。

有人可以告诉我如何纠正测试吗?

欢迎页面.js

import React from "react";
import { Link } from "react-router-dom";

class WelcomePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      isLoading: false,
    };
  }

  componentDidMount() {
    this.setState({ isLoading: true });
    const proxyurl = "https://cors-anywhere.herokuapp.com/";
    const url =
      "mu url"
    fetch(proxyurl + url)
      .then((res) => res.json())
      .then((data) => this.setState({ data: data, isLoading: false }));
  }

  render() {
    const …
Run Code Online (Sandbox Code Playgroud)

state renderer reactjs react-test-renderer

7
推荐指数
1
解决办法
2万
查看次数

OpenGL ES中的跨平台渲染器

我正在写一个跨平台的渲染器.我想在Windows,Linux,Android,iOS上使用它.

你认为避免绝对抽象并直接在OpenGL ES 2.0中编写它是一个好主意吗?

据我所知,我应该能够在PC上针对标准OpenGL进行编译,只需对代码进行一些小的更改即可处理上下文和与窗口系统的连接.

opengl cross-platform opengl-es renderer

6
推荐指数
1
解决办法
3005
查看次数

如何将项目集中在Java组合框中

Java中的组合框是否有一种方法可以将组合框中的项目居中?我尝试了这个,但它不起作用:

myCombobox.setAlignmentY(CENTER_ALIGNMENT);
Run Code Online (Sandbox Code Playgroud)

谢谢!

java swing renderer jcombobox

6
推荐指数
2
解决办法
1万
查看次数

难以理解swing的JTable和JTree的渲染器机制

通常,在使用JTableJTree用户写入和分配时,它是自己的特定单元格渲染器.

从中继承用户的组件是非常常见的DefaultTableCellRenderer,并实现了渲染器方法getTableCellRendererComponent.事实证明,DefaultTableCellRenderer事实上继承自JLabel,因此当调用super(在render方法中)时返回自己(this),因此用户的渲染器也可以类似地返回自己(this).

这一切都运作良好.

我的问题是它怎么样?

每次由表调用此方法时,都会为其指定不同的参数,并根据这些参数更改输出标签.如果它确实是标签的同一实例 - 不应该根据最后一次调用此方法进行更改?是不是意味着所有表格的单元格都是由同一个标签实例组成的,该标签实例保持相同的值(最后一次调用渲染器方法的值)?

我在网上搜索,并在Swing的代码中挖掘,找不到任何实际复制输出标签的克隆复制构造函数.我找不到任何证据表明(可能)swing使用反射,以便每次从头开始重新实例化渲染器.

我已经阅读了关于JTables的Swing 教程,在那里我可以找到下一行:

您可能希望表中的每个单元格都是一个组件.但是,出于性能原因,Swing表的实现方式不同.相反,单个单元格渲染器通常用于绘制包含相同类型数据的所有单元格.您可以将渲染器视为可配置的墨迹标记,该表用于将适当格式化的数据标记到每个单元格上.当用户开始编辑单元格的数据时,单元格编辑器接管单元格,控制单元格的编辑行为.

他们给出了一个暗示,我所说的确实是正确的,但不解释它是如何实现的.

我无法得到它.可以吗?

java swing jtable renderer jtree

6
推荐指数
1
解决办法
3412
查看次数

要么我错误地使用了 Angular Renerer2,要么它坏了。任何人都可以弄清楚吗?

使用普通的旧 javascript,这很简单:

myElement.style.setProperty('property', 'value', 'important');
Run Code Online (Sandbox Code Playgroud)

在 Angular 中,没有那么多。我已经在任何地方进行了详尽的搜索,但找不到一个关于如何执行此操作的示例,因此我在这里提出了这个问题。

Angular 中的 Renderer2 坏了,或者我只是做错了。

我将以下内容导入到我的组件中:

import {ElementRef, Renderer2, RendererStyleFlags2 } from '@angular/core';
Run Code Online (Sandbox Code Playgroud)

并且,在我的构造函数中:

constructor(private elRef: ElementRef,
            private renderer: Renderer2);
Run Code Online (Sandbox Code Playgroud)

我在我的模板中的一个元素上设置了一个没有问题的样式:

this.renderer.setStyle(this.elRef.nativeElement.querySelector('.my-div'), 'color', '#fff');
Run Code Online (Sandbox Code Playgroud)

当我尝试像这样设置重要标志时:

this.renderer.setStyle(this.elRef.nativeElement.querySelector('.my-div'), 'color', '#fff', RendererStyleFlags2.Important);
Run Code Online (Sandbox Code Playgroud)

或者像这样:

this.renderer.setStyle(this.elRef.nativeElement.querySelector('.my-div'), 'color', '#fff', flags:RendererStyleFlags2.Important);
Run Code Online (Sandbox Code Playgroud)

或者像这样:

public myFlags:RendererStyleFlags2;
this.renderer.setStyle(this.elRef.nativeElement.querySelector('.my-div'), 'color', '#fff', myFlags.Important);
Run Code Online (Sandbox Code Playgroud)

或者像这样的另一种方式:

public myFlags:RendererStyleFlags2.Important;
public myFlags:RendererStyleFlags2.Important = 1;
Run Code Online (Sandbox Code Playgroud)

以及使用数组和对象的许多其他尝试:

myFlags:any = {important: 1}
Run Code Online (Sandbox Code Playgroud)

以上都不起作用。

这是存在于 angular core 中的方法:

setStyle(el: any, style: string, value: any, flags: RendererStyleFlags2): void {
    if (flags & RendererStyleFlags2.DashCase) { …
Run Code Online (Sandbox Code Playgroud)

renderer angular

6
推荐指数
1
解决办法
2536
查看次数

Electron - 如何使用主进程和渲染进程

在这一点上,经过大量研究和谷歌搜索,我了解了主要和渲染器的作用,以及它们在 Electron 应用程序中的重要性。

但是,在这里我发出请求,希望得到所有知识渊博的人的回答:请我能清楚地说明如何在我的应用程序中实现这一点吗?

我有一个 main.js、index.html 和 style.css,我正在尝试从 html 文件中触发一个 javascript 函数。@Manprit Singh Sahota 有同样的问题,Electron js 中的按钮单击事件绑定,并解决了它(幸运的是他),但只是说明他正在 renderer.js 中设置他的函数,而没有解释在哪里、什么和如何。@NealR也有类似的问题,但也没有解释他如何关联他的 renderer.js。

请有人揭开这个神秘文件保存在哪里的秘密,以及我如何在我的程序中引用它?

不要建议电子文档,我已经通过它,它似乎需要一些严重的改进......

主文件

const electron = require('electron');
const { app, BrowserWindow } = require('electron');

//stuff creating window...

function applyFormattingRules() {
  console.log('called!');
};

//more stuff opening and closing window...
Run Code Online (Sandbox Code Playgroud)

索引.html

<head>
    //...
    <script src="main.js"></script>
</head>

<body>
    //...
    <button type="button" class="btn btn-secondary" name="applyRules"
    onclick="applyFormattingRules()">Apply formatting</button>
</body>
Run Code Online (Sandbox Code Playgroud)

我的窗口工作正常,没有错误。但是当我单击按钮时,什么也没有发生,也没有任何日志记录到控制台。也许我在代码中做错了什么,但我所有的研究似乎都指向 Electron 主进程和渲染器进程。

任何建议非常感谢。

javascript renderer node.js electron

6
推荐指数
1
解决办法
9568
查看次数

如何使用 TS 的渲染功能使 HTML 输入在我的网站上可见?

当我向数组提交一个新的 Person 并将其显示在表行中时,我一直试图让 renderUserList 正常工作。为了测试它是否从一开始就渲染,我从一开始就将第一个人添加到数组中。当我控制台记录数组和渲染函数本身时,它们似乎可以工作。当我“提交”某些内容时,数组会增加并且站点会重新呈现。然而,无论我做什么,我的页面仍然是空的,只有数组似乎真正按预期工作,但我的 html dom 没有丝毫改变。

class Person {
    public Firstname: string;
    public Lastname: string;
    constructor(Firstname: string, Lastname: string) {
        this.Firstname = Firstname;
        this.Lastname = Lastname;
    }
}

let people: Person[] = [
    new Person("Peter", "Parker")]

document.addEventListener("DOMContentLoaded", () => {
    renderUserList(people);

    document.getElementById("add-user").addEventListener("submit", (event) => {
        event.preventDefault();

        const FormField: HTMLFormElement = document.getElementById("add-person") as
            HTMLFormElement
        const FirstNameInput: HTMLInputElement = document.getElementById("Firstname") as
            HTMLInputElement;
        const LastNameInput: HTMLInputElement = document.getElementById("Lastname") as
            HTMLInputElement;
        const FName: string = FirstNameInput.value;
        const LName: string = LastNameInput.value;
        if …
Run Code Online (Sandbox Code Playgroud)

html arrays renderer typescript

6
推荐指数
1
解决办法
56
查看次数