草庐IT

网页组件

全部标签

javascript - 使用绑定(bind)将 Angular 组件编译为 HTML

我需要为我的map标记气球正文提供一个可靠的HTML字符串。我想让气球成为一个Angular组件,并使用绑定(bind)和内置指令(*ngFor、*ngIf等)。所以我正在寻找一种方法来评估组件模板中的所有绑定(bind)并将结果编译为字符串...如何实现这个或者如果这个方法是非Angular——推荐的模式是什么?//Componentimport{Component}from'@angular2/core';import{AnyThing}from'./somewhere/in/my/app/anything.model.ts';@Component({selector:'my-ba

javascript - 在内容可编辑的 ReactJS 组件中定位插入符号

我正在使用ReactJS将文本值渲染到contenteditableDOM节点中。例如:vardata=[{value:'Hello'},{value:'World!'}];varcomponent=React.createClass({render:function(){varpieces=this.props.data.map(function(piece){return({piece.value};);});return{pieces};}});React.renderComponent(,someContainer);导致DOM看起来像这样(出于多种原因):Hello;Worl

javascript - 通过 AJAX 加载 SPA 网页

我试图通过插入URL使用JavaScript获取整个网页。但是,该网站构建为使用JavaScript/backbone.js的单页应用程序(SPA)在呈现初始响应后动态加载大部分内容。例如,当我路由到以下地址时:https://connect.garmin.com/modern/activity/1915361012然后将其输入控制台(在页面加载后):var$page=$("html")console.log("%c✔:","color:green;",$page.find(".inline-edit-target.page-title-overflow").text().trim()

javascript - 检测查询参数 react-router-dom v4.x 的变化并重新渲染组件

我不太确定为什么在我更改查询参数后它会显示默认路由。对于这类问题有更好的方法吗?也许我不应该使用查询参数?开放接受教育!版本“react”:“^16.2.0”,“react-dom”:“^16.2.0”,“react路由器”:“^4.2.0”,"react-router-dom":"^4.2.2",测试用例https://codepen.io/adamchenwei/pen/YeJBxY?editors=0011重现步骤单击主页->步骤1预期行为转到第1步以及第2步渲染正确的dom实际行为空的,页面上没有呈现任何内容//Forthisdemo,weareusingtheUMDbuild

javascript - React 反模式,在另一个组件的定义中定义了一个组件

我已经阅读了React中的嵌套组件。我尝试了这个例子并注意到每次我更新父组件(todolist)的状态。DOM树重新渲染整体而不是添加新的。我的问题是:这是我们应该避免的反模式吗?constTodoList=({todos,onTodoClick})=>{constTodo=({completed,text,onClick})=>{return({text});};returntodos.map(todo=>onTodoClick(todo.id)}/>);};这是我的测试 最佳答案 问题是,当你两次调用TodoList时,你会得到

javascript - 我可以使用 Angular2 Universal 仅在客户端中运行组件方法吗?

我正在写一个angular2universal应用程序。它有一个d3图表,但我希望只在客户端(浏览器)呈现d3图表,而不是尝试在服务器上呈现它。angular2universal中是否有一个接口(interface)只能在客户端运行一个组件方法?即classComponentWithChartimplementsOnInit,ngUniversalBrowser{elem;constructor(privateviewContainerRef:ViewContainerRef){}ngUniversalBrowserOnInit(){this.elem=this.viewContain

javascript - 使用 Chrome 扩展中的 jQuery/Plain Javascript 修改 React 组件的状态

我正在构建一个小型Chrome扩展程序供我个人使用。在Facebook的广告管理器(使用React)中,我想将textarea字段的值更改为由我的chrome扩展程序生成的值。我试过像这样用老式的方式做document.querySelector('textarea').value=myValue;这会改变屏幕上的值,但在chrome的检查元素中,该值不会改变,当我关注输入元素时,值会重置。这是React组件的图片:这是这个react组件Prop和状态的图片:在上面的组件中,我想将state.displayValue更改为我的值。如何实现? 最佳答案

javascript - React、Apollo 2、GraphQL、身份验证。如何在登录后重新渲染组件

我有这个代码:https://codesandbox.io/s/507w9qxrrl我不明白:1)如何在以下之后重新渲染()Menu组件:this.props.client.query({query:CURRENT_USER_QUERY,fetchPolicy:"network-only"});如果我login()我希望我的Menu组件重新渲染()本身。但是什么也没有。只有当我点击Home链接时,它才会重新渲染()本身。我怀疑是因为我正在使用它来渲染它:在react-routerprops中拥抱它。有错吗?另外,如果在login()之后检查Menu的this.props,我会永远看到l

javascript - 将单文件 .vue 组件转换为 JavaScript?

是否有一个工具可以采用这样的.vue模板:Hello,{{thing}}exportdefault{data(){return{thing:'World'};}}div{background:red;}并将其转换为.js文件,如下所示:exportdefault{template:`Hello{{thing}}`,data(){return{thing:'World'}}}(不确定它对CSS有什么魔力,但它会做一些事情。)我正在尝试使用native浏览器模块,效果很好,但我想使用.vue文件语法,因为它提供了一些不错的东西。我想避免使用像Webpack或Browserify这样的bun

javascript - 从 BLOB 格式 -Angular 实现 PDF 预览或在网页中隐藏部分 PDF

如果我的AngularController中有一个PDF文件的BLOB表示,我将按以下方式在我的HTML页面中公开该文件://controllerfunction(data){varfileBack=newBlob([(data)],{type:'application/pdf'});varfileURL=URL.createObjectURL(fileBack);$scope.content=$sce.trustAsResourceUrl(fileURL);}//html如果我想在浏览器中显示文档的某些部分时对其进行屏蔽,我有哪些选择?这种情况包括我能想到的(顺便说一句,只是想证明这