小编Chr*_*odz的帖子

我一直在阅读一些关于Angular 2陷阱的文章以及要避免的内容,其中一个问题围绕着不直接访问DOM.

我注意到它Renderer非常有用,因为它包含一些可以帮助避免DOM陷阱的方法.然而,我注意到,它不包含任何get功能,只set等功能setElementAttribute,setElementClass等等.

所以我的问题很简单,你如何使用上述功能,但作为get和remove版本？他们是否住在另一个班级或者您如何使用例如检索属性或类？

我收到此错误：

尚未向该数组注册任何表单控件。如果您使用的是ngModel，则可能需要检查下一个刻度（例如，使用setTimeout）。

使用此代码时：

public settingsForm: FormGroup = this.fb.group({
  collaborators: this.fb.array([]),
  rsvp: this.fb.group({
    latestDate: ['', [Validators.required]],
    latestTime: ['', [Validators.required]],
    guestLimit: ['', [Validators.required]],
    isRSVPOpen: false,
    isGuestPlusOne: false,
    isAutoApproveToGuestlist: false,
    isOnlyFacebookRSVP: false,
    isBirthdayAndPhoneRequired: false
  }),
  tickets: this.fb.group({
    info: this.fb.group({
      closingDate: '',
      closingTime: ''
    }),
    types: this.fb.array([])
  })
});

内部ngOnInit：

this.eventSubscription = this.af.database.object('/events/' + this.eventId)
  .filter(event => event['$value'] !== null)
  .subscribe((event: IEvent) => {

    const settings: ISettings = event.settings;
    const collaborators: ICollaborator[] = settings.collaborators;
    const rsvp: IRSVP = settings.rsvp;
    const tickets: ITickets …

我试图将transcluded内容绑定到组件循环内部的变量,但我无法这样做.

我查看了PrimeNG的dropdown组件,他们一起使用template标签let-car绑定到car循环的变量.

但是,当我尝试这个时,我甚至无法将内容转换为内容.实现这一目标的正确方法是什么？

尝试:

<!-- Obviously not gonna work -->
<comp>
  <span>{{option.name}}, {{option.type}}</span>
</comp>

<!-- Thought this would work but it doesn't, in odd scenarios I get the last element of the loop to transclude content and bind correctly. -->
<comp>
  <template let-option>
    <span>{{option.name}}, {{option.type}}</span>
  </template>
</comp>

在组件中:

<ul>
  <li *ngFor="let option of options">
    <ng-content></ng-content>
  </li>
</ul>

简单的我正在努力实现的目标:

https://plnkr.co/edit/6SS03fuXmbvJB4nmf1AO?p=preview

在找了一段时间寻找解决方案后,我没有提出任何问题.我要做的是在第一个li元素的top left角落创建一个对角线边框..我尝试使用涉及该background属性的解决方案,但它并没有给我我想要的东西.此外,它不允许对以后需要的颜色进行任何操作.

浅蓝色应该是被切割的边框(而不是被切割的背景),深灰色应该是背景li.

我怎样才能通过CSS实现这一目标？JS/Jquery解决方案也可以使用.

编辑:在看到我的问题的许多错误解释后,我会澄清一点:

左图是我现在拥有的,右图应该是结果.

.cal-scheme {
    width: 100%;

    li {
        width: calc(100% / 6);
        height: 150px;
        margin: 0;
        padding: 0;
        border: $thin-blue;
        box-sizing: border-box;
        float: left;

        &:first-child {
            background: linear-gradient(135deg, transparent 20px, $light-blue 0);
            border: 0;
        }
    }
}

假设我们网站上有三个按钮:

<button>Like</button>
<button>Dislike</button>
<button>Flag</button>

每个按钮都会调用各自的功能:

<button ng-click="like()">Like</button>
<button ng-click="dislike()">Dislike</button>
<button ng-click="flag()">Flag</button>

在控制器中它可能看起来像这样:

$scope.like = function() {
  return likes + 1;
}

$scope.dislike = function() {
  return dislikes + 1;
}

$scope.flag = function() {
  return flags + 1;
}

由于$scope太多观察者的混乱对性能不利,这样做不是更好:

$scope.actions = {
  like: function() {
    return likes + 1;
  },
  dislike: function() {
    return dislikes + 1;
  },
  flag: function() {
    return flags + 1;
  }
}

然后使用它像:

<button ng-click="actions.like()">Like</button>
<button ng-click="actions.dislike()">Dislike</button>
<button ng-click="actions.flag()">Flag</button>

这将使观察者的数量从3减少到 …

所以我得到了这个整洁的gulpfile,而且除了这一件事之外它还能顺利运行.

我正在运行gulp-plumber以阻止监视任务因错误而崩溃,错误被它捕获但是当我修复错误时,观察者拒绝继续.我添加了handleError回调但它似乎没有做任何事情,即使这篇文章说它应该.这让我变得精神错乱,因为我知道那些已经让它工作的人没有任何这些,但我找到的解决方案似乎都没有用.我错过了什么吗？

编辑:当我有一个错误,_lists.scss例如抛出的错误看起来像这样:

[22:04:43] Plumber found unhandled error:
Error in plugin 'gulp-sass'
Message:
styles\partials\_lists.scss
1:1  invalid top-level expression

这是否意味着我还必须手动处理错误on.('error', function() {})？因为我认为这是管道工的目的,要删除手动错误处理.我甚至尝试使用此手动捕获错误,但它只是吐出控制台中的错误,并拒绝继续像以前一样.

这是管道工管道部分:

// Compile our SCSS into minified CSS
gulp.task('styles', function() {
  return gulp.src('styles/main.scss')
    .pipe(plumber({
      handleError: function (err) {
        console.log(err);
        this.emit('end');
      }
    }))
    .pipe(sass({ style: 'expanded' }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/styles'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/styles')) …

我试图找出如何使用混合设备来绑定触摸和点击事件,但我找不到任何实际上似乎有用的解决方案(我没有混合设备,所以我不能直接测试但由于失败的尝试甚至不能在普通设备上工作,我认为它们不能在混合设备上工作.

问题是在混合设备上,您必须同时覆盖触摸和单击事件,而不必两次触发功能.所以,如果你看一下我的失败尝试(2,3)你可以看到,我结合这两个touchend和click,但似乎是某种语法错误或东西,因为这将导致没有任何事件实际上是火.

第一个解决方案工作正常但是当我只使用一个或另一个事件触发类型时.

到目前为止我尝试过的:

1 - 适用于触摸设备和点击设备:

_renderer.listenGlobal('document', 'ontouchstart' in window ? 'touchend' : 'click', (e) => {

  console.log('works');  
});

2 - 触摸或点击设备不会触发:

_renderer.listenGlobal('document', 'touchend click', (e) => {

  console.log('works');

  e.stopPropagation(); 
});

3 - 触摸或点击设备不会触发:

_renderer.listenGlobal('document', 'touchend, click', (e) => {

  console.log('works');  

  e.stopPropagation();
});

如您所见,第一个示例涵盖2/3设备类型,而其他示例覆盖0.

如何确保我的功能在每台设备上都能正常运行？

在过去的几周里，我发现自己一遍又一遍地遇到同样的问题，那就是||如果未设置第一个值，则使用运算符分配默认值：

(myVariable || 'somestring')

只要myVariable不是 a 0，这种方法就有效，但如果它是 a ，0那么就会出现问题，因为它将把它算作一个假值。这可以通过检查它是否为零来解决，但它很快就会变得难以阅读，例如(myVariable >= 0 ? myVariable : 'somestring').

myVariable允许存在0但仍算作真实值的最简单和最正确的方法是什么？请注意，它myVariable仍然必须是原始值，因此使用!!运算符将​​不起作用。

我有一个简单的问题,但我似乎无法找出任何解决方案.

基本上我有一个输入,在聚焦时切换下拉列表,当它不再聚焦时,它应该关闭下拉列表.

但问题是,如果单击下拉列表中的某个项目,该功能将在项目功能blur之前执行click,导致该click功能根本无法运行,因为在注册单击之前下拉列表已关闭.

我怎么解决这个问题？

<input (focus)="showDropdown()" (blur)="myBlurFunc()">
<ul>
  <li *ngFor="let item of dropdown" (click)="myClickFunc()">{{item.label}}</li>
</ul>

我将 Nx 与 Angular 一起使用。我已经运行了@nx/application - setup-ssr生成器，它为 SSR 创建了所有必需的文件。之前它用于添加单独的执行器来为具有 SSR 的应用程序提供服务，例如serve-ssr，但没有添加新的执行器，project.json如下所示：

{
  "name": "public",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "projectType": "application",
  "prefix": "app",
  "sourceRoot": "apps/public/src",
  "tags": [],
  "targets": {
    "build": {
      "executor": "@angular-devkit/build-angular:application",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "dist/apps/public",
        "index": "apps/public/src/index.html",
        "browser": "apps/public/src/main.ts",
        "polyfills": ["zone.js"],
        "tsConfig": "apps/public/tsconfig.app.json",
        "assets": [
          {
            "glob": "**/*",
            "input": "assets",
            "output": "assets"
          },
          "apps/public/src/favicon.ico",
          "apps/public/src/assets"
        ],
        "styles": ["apps/public/src/styles.scss"],
        "stylePreprocessorOptions": {
          "includePaths": ["styles", "libs/stylekit/src/lib"]
        },
        "scripts": [],
        "server": "apps/public/src/main.server.ts",
        "prerender": true,
        "ssr": {
          "entry": …