小编Pra*_*lia的帖子

这可能是一个愚蠢的问题,但我还没有找到答案.为什么我们不能做以下事情呢？

window = undefined

要么

document = undefined

我知道那些是全局的并且可以在浏览器中使用,但是考虑JavaScript是如何工作的,这是不可能的？每次我们尝试访问它们时都会重新评估吗？

我也有兴趣了解这些window或document对象在将它们设置为随机值之后如何保持它们的状态...可能是number或者undefined或者null.

我有这支笔试图模仿一个围绕某事物旋转的物体.这有效,但不顺利.旋转时,它会在左右边缘暂停.

我认为它与某些事情有关animation-timing-function但无法通过任何内置函数(如ease-in-out或linear自定义cubic-bezier函数)获得所需的结果.

如何让动画感觉流畅？如果有更好的方法可以做到这一点,请随时告诉我.

.overlay {
  background-image: -webkit-repeating-linear-gradient(0deg, transparent, transparent 1%, rgb(255, 255, 255) 2%, rgb(255, 255, 255) 2%);
  background-image: repeating-linear-gradient(90deg, transparent, transparent 1%, rgb(255, 255, 255) 2%, rgb(255, 255, 255) 2%);
  height: 200px;
  position: relative;
  width: 40%;
  margin: auto;
}
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #888;
  position: absolute;
  z-index: -1;
  left: 0;
  display: inline-block;
}
.move {
  -webkit-animation: moveAndGlow 2s infinite ease-in-out;
  animation: moveAndGlow 2s infinite …

td;dr 如何在已经使用 TypeScript 的项目中包含 vue-apollo？

我使用 vue cli@3 和 TS 创建了一个新的 vue 项目。

然后我添加了vue-apollo修改我的 main.ts 文件的插件来添加

apolloProvider: createProvider(),

在 vue 实例创建中。

但是编译器对此有所抱怨。

'{ router: VueRouter; 类型的参数 商店：商店<{}>；apolloProvider: { 提供: () => {}; }; 渲染：（h：CreateElement）=> VNode；}' 不能分配给类型为 'ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record>' 的参数。

对象字面量只能指定已知的属性，并且在类型 'ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record>' 中不存在 'apolloProvider'。[2345]

我可以看到我从 npm 获取的 vue-apollo 包中有一个 types 目录，但不确定如何使用它们。

我也得到以下

[ts] 找不到模块“@/vue-apollo”的声明文件。'/Users/praveen/code/voicezen/repos/voicezen-ui/src/vue-apollo.js' 隐式具有 'any' 类型。[7016]

对于 main.ts 中的以下导入

import { createProvider } from '@/vue-apollo';

我知道这可能来自noImplicitAny规则，但是将生成的vue-apollo.js 更改为 …

我正在尝试一个简单的演示,我给了元素颜色hsl.根据我的经验,我知道0CSS 中的(ZERO)是无单元的.如果要将0指定为值,则可以离开单位.

然而,hsl/hsla似乎并非如此.在Chrome和Firefox上,都会导致无效的属性值.

一个切线相关的问题是这个,但它包含的答案是零应该是指无规则的指标.

hsla(0,0%,0%,0)的任何错误,变成hsla(0,0,0,0)？(缺少百分号)

hsl(0,0,0)     // error
hsl(0,0%,0)    // error
hsl(0,0,0%)    // error

它是否专门设计用于零以外的单位？有没有这样的其他属性,其中一个单位在零旁边是必须的？

我正在尝试创建一个简单的select组件,它通过属性接收一些数据并呈现所需的选项.我打算在另一个组件的模板中使用这个select组件,比如PageComponent's template(page.template.html).

我正在select使用PageComponent的变量绑定到组件[(ngModel)].选择一个选项后,变量get的值会按预期更新,但如何在页面加载时将其设置为指向第一个选项而不触发select组件的手动选择？

这是代码.

在page.template.html中

<select ui-select 
        [options]="options" 
        [(ngModel)]="alertType"
        [defaultValue]="'Select an alert Type'">
</select>
{{alertType}} <!-- To see the value while debugging -->

在page.component.ts中,PageComponent类

alertType:any;
options = [
    {id:1, value:"item-1"},
    {id:2, value:"item-2"},
    {id:3, value:"item-3"}
];

在select.component.ts中

import {Component, Input} from '@angular/core'

@Component({
  selector: '[ui-select]',
  template: `
    <option *ngIf="defaultValue" value="-1">{{defaultValue}}</option>
    <option *ngFor="let option of options" [value]="option.id">{{option.value}}</option>
  `
})
export class SelectComponent {
  @Input() options: any;
  @Input() defaultValue: …

我不确定我是否遗漏了一些明显的东西，但有人可以向我解释一下吗？以下代码段来自我在 Chrome DevTools Console 上所做的。Firefox 的结果也是如此。

> let container = document.createElement("div")
> undefined
> container.style.background = "#bbb"
> "#bbb"
> container
> <div style=?"background:? rgb(187, 187, 187)?;?">?</div>?
> container.style.background = "hsl(120, 50%, 50%)"
> "hsl(120, 50%, 50%)"
> container
> <div style=?"background:? rgb(63, 191, 63)?;?">?</div>?

这是为了更好的可读性的图像。

这是标准行为吗？如果是这样，我如何将真正的 HEX 或 HSL 值放入内联样式？

我找了一个重复的问题,但在SO上找不到.因此它就在这里.

我的#each模板中有一个块,它成功地从数组中打印了值,但是当我尝试@index在这个块中使用这样的当前索引时{{@index}},它是未定义的.

从官方车把文档中我发现了获取当前索引的方法.

路由器(router.js):

Router.map(function() {
    this.resource("books", function(){
        this.route("about", { path : "/:bookId"}, function(){

        });
    });
});

路线(routes/books.js):

var BooksRoute = Em.Route.extend({
    model: function() {
        return [{
            name: "Harry Potter & The Deathly Hallows"
        }, {
            name: "What If?"
        }, {
            name: "Diary of a Wimpy Kid"
        }, {
            name: "The Martian"
        }];
    }
});

export default BooksRoute;

模板(templates/books/index.hbs):

<div class="page-header">
    <h1>All Books!</h1>
    <ul>
        {{#each book in model}}
            {{@index}}
            <li>{{#link-to "books.about"}} {{book.name}} …

这可能很愚蠢，但是我如何以更干净的方式在 Angular 2 中做这样的事情呢？（避免字符串连接）

<div [class]="'indicator indicator-circle ' + colorClass"></div>

说明： 我想始终添加两个静态类indicator&但我也希望应用来自组件类的输入。indicator-circlecolorClass

我正在寻找一种方法来确定何时单击或使用回车键选择mat-option内部mat-autocomplete.

该click事件绑定如预期,但作品keyup.enter甚至只是keyup事件不起作用.

这是库中的错误还是我做错了什么？

<mat-option (click)="onEnter()" (keyup.enter)="onEnter()" *ngFor="let state of filteredStates | async" [value]="state.name">

这是一个实例 - https://angular-3okq5u.stackblitz.io

更新:请提及是否有更好的方法来处理<mat-option>元素级别的选项选择.

好.我突然想到了这个问题.

像jQuery这样的库使得查找具有某些元素的元素变得非常容易class.它不会强迫我们id对要找到的元素应用.在Vanilla js中,我们可以选择使用getElementById()强制我在很大程度上应用ID 的方法找出元素.

我查看了这个解决方案,找到一个使用属性的元素,在这种情况下将会是这样class.在完成解决方案后,我发现浏览器非常繁重.如果我有一个复杂的DOM结构,它将会降低性能.我的问题仍然是一样的.

如何在Vanilla Javascript中使用class name和不使用元素id？