小编Laz*_*vić的帖子

.append VS .html VS .innerHTML表现

这个网站在3种不同的方法之间运行测试,它似乎.html是最快的,其次是.append.接着是.innerHTML.有人可以向我解释原因吗?

这是三种方法之间进行比较网站.

我已经读过这个与相关的问题但是我并不真正理解给定的答案,而且这个问题并没有真正详细阐述.innerHtml.

我不明白以下部分:

创建一个临时元素,我们称之为x.x的innerHTML设置为您传递的HTML字符串.然后jQuery将每个生成的节点(即x的childNodes)转移到新创建的文档片段,然后它将被缓存以供下次使用.然后它将片段的childNodes作为新的DOM集合返回.请注意,它实际上要复杂得多,因为jQuery会进行一系列跨浏览器检查和各种其他优化.例如,如果你只传递<div></div>给jQuery(),jQuery将采用一个快捷方式,只需执行document.createElement('div').

有人可以简化这个吗?

javascript jquery

38
推荐指数
4
解决办法
7万
查看次数

带有i18n的Angular Universal(服务器端渲染)

我尝试使用角度通用的Angular官方国际化工具.到目前为止,我能够使用以下过程翻译客户端渲染(感谢这个答案/sf/answers/2865107731/):

我在模板中的文档中添加了"i18n"属性:

./src/+app/about/about.component.html:

<h1 i18n="H1 of the about component">About</h1>
...
Run Code Online (Sandbox Code Playgroud)

然后我跑:

./node_modules/.bin/ng-xi18n
Run Code Online (Sandbox Code Playgroud)

生成基本messages.xlf文件.

然后,我将每个要支持的语言环境的文件复制为"locale"文件夹中的" messages.[locale] .xlf ".准备好后,我为每个包含其内容的导出字符串的xlf文件创建" messages.[locale] .ts ":

./locale/messages.fr.ts:

// TRANSLATION_FR is only for "messages.fr.ts" of course.
// I would create a TRANSLATION_ES const inside "messages.es.ts" for spanish for example.
export const TRANSLATION_FR: string = `<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="004b222ff9ef9dd4771b777950ca1d0e4cd4348a" datatype="html">
        <source>About</source>
        <target>A propos</target>
        <note priority="1" from="description">H1 of the about component</note>
      </trans-unit>
    </body>
  </file>
</xliff> …
Run Code Online (Sandbox Code Playgroud)

internationalization webpack angular-universal angular

29
推荐指数
1
解决办法
2642
查看次数

如何将Angular中的preserveWhitespaces选项全局设置为false?

自从版本5的beta版本之一以来,Angular有一个新的编译器选项,preserveWhitespaces.该属性在文档中的CompilerOptions类型别名中提到.Component装饰器的文档描述了它的用法,并提到版本5中的默认值是true(没有空白删除).

我已经看过PR,但从我从一些测试中可以看出,使用它的唯一方法是提供preserveWhitespace每个@Component元数据.如何将所有组件设置为false全局,然后将其设置为仅用于某些组件?true

angular

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

Angular:如果在视图中进行了任何更改,则阻止路由更改

如果我在视图中有一个表单(Angular).当用户尝试离开那里时,我想要显示确认消息.我怎样才能做到这一点?

angular

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

v-if内的复杂条件

我想创建一个复杂的条件来传递给v-if指令.

我尝试了以下内容.

<div v-if="(order.order_products[key].statuses[0].id) != 3 || order.status != 3" >
Run Code Online (Sandbox Code Playgroud)

我可以在Vue中添加复杂的条件v-if吗?这不起作用.

我也试过&&但是那也行不通.我没有在文档中找到任何关于此的内容.

vue.js

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

如何宣布网站没有屏幕阅读器支持?

我们可以用<noscript>来说抱歉,这个网站需要运行JavaScript.

有什么类似的方式宣布该网站不支持屏幕阅读器?有点像<noscreenreader>Sorry, ...</noscreenreader>.


(短背景故事:它是依赖于创意转化为应用程序从未使用的话它在很大程度上依赖于影像来传达信息这是没有意义的宣布.任何在口语中.)

html html5 accessibility screen-readers

16
推荐指数
2
解决办法
1154
查看次数

Angular:如何使用参数确定活动路径?

我已经阅读了关于如何确定活动路线的这个问题,但是我还不清楚如何确定一个有参数的活动路线?

现在我这样做:

<a [routerLink]="['/Profile/Feed', {username: username}]"
   [ngClass]="{active: getLinkStyle('/profile/john_doe/feed')}">
   Feed for {{username}}
</a>
Run Code Online (Sandbox Code Playgroud)

在我的组件内:

getLinkStyle(path:string):boolean {
  console.log(this._location.path()); // logs: '/profile/john_doe/feed'
  return this._location.path() === path;
}
Run Code Online (Sandbox Code Playgroud)

这将有效,因为我将用户名作为字符串传递.有没有办法通过传递正确的参数?

angular2-template angular2-routing angular

15
推荐指数
4
解决办法
2万
查看次数

创建一个可重用的FormGroup

我知道创建自定义的控件作为组件,但我无法弄清楚如何创建自定义.

同样,我们可以做到这一点实现ControlValueAccessor,并使用自定义组件一样<my-cmp formControlName="foo"></my-cmp>,我们如何才能达到这种效果

<my-cmp formGroupName="aGroup"></my-cmp>
Run Code Online (Sandbox Code Playgroud)

两个非常常见的用例是:(a)将长形式分为几个步骤,每个步骤分别在一个单独的组件中;(b)封装一组出现在多种形式的字段,例如地址(国家,州,城市组) ,地址,建筑物编号)或出生日期(年,月,日).


用法示例(不是实际工作代码)

Parent具有以下形式FormBuilder:

// parent model
form = this.fb.group({
  username: '',
  fullName: '',
  password: '',
  address: this.fb.group({
    country: '',
    state: '',
    city: '',
    street: '',
    building: '',
  })
})
Run Code Online (Sandbox Code Playgroud)

父模板(为简洁起见,不可访问和非语义):

<!-- parent template -->
<form [groupName]="form">
  <input formControlName="username">
  <input formControlName="fullName">
  <input formControlName="password">
  <address-form-group formGroup="address"></address-form-group>
</form>
Run Code Online (Sandbox Code Playgroud)

现在AddressFormGroupComponent知道如何处理在其中具有这些特定控件的组.

<!-- child template -->
<input formControlName="country">
<input formControlName="state">
<input formControlName="city">
<input formControlName="street"> …
Run Code Online (Sandbox Code Playgroud)

angular angular-forms

15
推荐指数
2
解决办法
7401
查看次数

用于编写文本的"撤消"画布转换

使用画布应用变换时,结果文本(显然)也会被转换.有没有办法阻止影响文本的某些转换,如反射?

例如,我设置了一个全局变换矩阵,因此Y轴指向上方,X轴指向右侧,(0, 0)点位于屏幕的中心(您对数学坐标系的期望).

但是,这也使文本颠倒了.

const size = 200;

const canvas = document.getElementsByTagName('canvas')[0]
canvas.width = canvas.height = size;
const ctx = canvas.getContext('2d');

ctx.setTransform(1, 0, 0, -1, size / 2, size / 2);

const triangle = [
  {x: -70, y: -70, label: 'A'},
  {x:  70, y: -70, label: 'B'},
  {x:   0, y:  70, label: 'C'},
];

// draw lines  
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.moveTo(triangle[2].x, triangle[2].y);
triangle.forEach(v => ctx.lineTo(v.x, v.y));
ctx.stroke();
ctx.closePath();
  
// draw labels
ctx.textAlign = 'center';
ctx.font = '24px …
Run Code Online (Sandbox Code Playgroud)

javascript canvas transformation

14
推荐指数
2
解决办法
555
查看次数

如何在Angular中为*ngFor设置动画?

我需要在ngFor列表填充和显示时为其设置动画.每个元素都应该有一个转换,让我们说这样的话.

我怎样才能做到这一点?

transition angular angular-animations

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