小编MrC*_*oft的帖子

无法导入自定义组件 - Angular2和TypeScript

我正在尝试在我的app.ts中导入一个自定义组件,但得到错误" TS2307:找不到模块'MyComponent' "我看了一遍,找不到任何可以帮助我的东西.

有些人写道:使用"moduleResolution":"经典",但如果我这样做,那么除了MyComponent之外,我得到TS2307的所有其他错误(所有angular2/...).

其他人写了"run tsc --declaration MyComponent.ts" - 它确实会生成一个MyComponent.d.ts文件(同时在控制台中抛出错误,比如"除非提供了--module标志就无法编译") - 这是在tsconfig中提供的作为一个选项 - 或者"无法找到模块'angular2/common'",无论我在MyComponent.ts中导入什么 - 但它确实会生成.d.ts文件),但是在尝试编译app.ts时它仍然提供相同的TS2307错误.Nohting我找到了工作.

这是我的项目结构:

| /app
|     /resources
|         /dev
|             /ts
|                 app.ts
|                 MyComponent.ts
|         /dist
|             /js
|                 app.js          // transcompiled app.ts
|                 MyComponent.js  // transcompiled MyComponent.ts
|             /modules            // files copied from the /node_modules/**/ folders (because node_modules is outside versioning and also outside public root (public root is the /app folder)
|                 es6-shim.js
|                 angular2-polyfills.js
|                 system.src.js
|                 Rx.js
|                 http.dev.js …
Run Code Online (Sandbox Code Playgroud)

typescript systemjs angular

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

Angular 2自定义html标签的安全性如何?(选择器:自定义标签与自定义属性)

这是关于Angular 2选择器,自定义标签与自定义属性,SEO和浏览器呈现的问题.

当我第一次开始查看Angular 2时,我在跟随他们的快速启动时做的第一件事,即蝙蝠的权利,就是将我的选择器更改为'[my-component]'(属性选择器)而不是'my-component'(标签选择器),所以我可以<div my-component></div>在我的html中而不是<my-component></my-component>,这是无效的HTML.所以我会根据标准写html.好吧,至少非常接近标准(因为my-component它不是一个有效的html属性,但我只能接受那个html验证错误)

然后,在youtube上的某个视频中,角色团队的某个人提到我们应该使用标签选择器,至少在性能方面.

好吧我说,螺旋html验证......或者不应该我?
所以:

  1. 假设我忽略了W3C尖叫我的html完全无效,因为<custom-tags>.我实际上有另一个更大更真实的问题:这对SEO有何影响?
    我的意思是不要只考虑客户端应用程序,因为在现实世界中(以及我的角度2项目)我也有服务器端渲染,因为2个非常重要的原因:SEO快速初始渲染网站到应用程序引导之前的初始视图的用户.否则你不能拥有非常高的交通SPA.
    当然,谷歌将抓取我的网站,无论我使用哪个标签,但它会在两种情况下对它进行排名:一个与<custom-make-believe-tags>另一个只有标准的html标签?

  2. 我们来谈谈浏览器和CSS:

当我开始在Angular 2中构建我的第一个SPA站点时,我立即面临另一个问题:
Say(在非SPA站点中)我有以下html标记:

<header>
    <a class="logo">
        ...
    </a>

    <div class="widgets">
        <form class="frm-quicksearch"> ... </form>
        <div class="dropdown">
            <!-- a user dropdown menu here -->
        </div>
    </div>
</header>

<div class="video-listing">
    <div class="video-item"> ... </div>
    <div class="video-item"> ... </div>
    ...
</div>
Run Code Online (Sandbox Code Playgroud)

Angular 2明智我将拥有以下组件树:

<header-component>
    <logo-component></logo-component>
    <widgets-component>
        <quicksearch-component></quicksearch-component>
        <dropdown-component></dropdown-component>
    </widgets-component>
</header-component> …
Run Code Online (Sandbox Code Playgroud)

css seo html-validation angular2-components angular

8
推荐指数
1
解决办法
4070
查看次数

某些项目中缺少PhpStorm Npm和Gulp工具窗口

对于我gulpfile.js在项目根目录中的所有项目(也是bower.json,package.jsonnode_modules).在PhpStorm Settings> Languages & Frameworks> Node.js and NPM我可以看到所有的(本地和全球)封装.

然而,在某些项目PhpStorm显示npmGulp工具窗口...并在其他项目中也没有.

还有其他人遇到过这个问题吗?具有这些工具窗口的项目与不具有这些工具窗口的项目之间的唯一(一致)差异是:PhpStorm未显示那些工具窗口的项目正在使用版本控制(svn或git).我不知道为什么会这样:|

npm phpstorm gulp

5
推荐指数
1
解决办法
1985
查看次数

无法使debounceTime()或throttleTime()处理Angular http请求

对于我的生活,我无法做到这一点.我搜索过并搜索过,但是我找不到任何例子(所有的例子都有.fromEvent(),没有一个http.get).

在我的模板中,我有这样的输入:

<input type="text" (input)="categoriesSearch($event)">
Run Code Online (Sandbox Code Playgroud)

在我的组件中,我有以下内容:

categoriesSearch(event) {
    this.categoriesSubscription = this.apiService
        .getCategoriesList(this.uploadForm.get('categories').value)
        .debounceTime(3000)
        // .throttleTime(3000)
        .subscribe(
            (response) => {
                this.categories = response.data;
            }
        );
}
Run Code Online (Sandbox Code Playgroud)

这是我的ApiService中的方法:

getCategoriesList(keyword = null) {
    const headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('Bearer', this.authService.user.token);

    const getParams: URLSearchParams = new URLSearchParams();
    getParams.set('keyword', keyword);
    return this.http.get(this.apiHost + '/categories', { headers: headers, search: getParams })
        .map(response => response.json());
}
Run Code Online (Sandbox Code Playgroud)

在该categoriesSearch()方法中,我都试过debounceTime()throttleTime()(我还进口了他们,当然import 'rxjs/add/operator/debounceTime',import 'rxjs/add/operator/throttleTime').

但http.get请求根本没有被去除或限制!如果我在3秒内输入10个字符,则会产生10个http请求.

this.http.get …

rxjs5 angular

5
推荐指数
1
解决办法
5376
查看次数

将属性传递给 ng-content 内的组件(标记所在的组件中不可用的属性)

我正在尝试开发一个轮播。

期望的最终结果应该是开发人员只需将整个标记写入一个位置(假设在app.component.html),仅使用一个options属性,然后轮播将接管。

问题是,carousel.component我需要设置一些属性carousel-item.component(属性app.component应该与...无关,但所有标记都在app.component.html)。

我怎样才能实现这个目标?

app.component.html:

<carousel [options]="myOptions">
    <carousel-item *ngFor="let item of items">
        <img [src]="item.image" alt="" />
    </carousel-item>
</carousel>

<hr />

<carousel [options]="myOptions2">
    <carousel-item *ngFor="let item of items">
        <img [src]="item.image" alt="" />
    </carousel-item>
</carousel>
Run Code Online (Sandbox Code Playgroud)

carousel.component.html:

<div class="carousel-stage">
    <ng-content></ng-content>
</div>
Run Code Online (Sandbox Code Playgroud)

carousel-item.component.html:

<ng-content></ng-content>
Run Code Online (Sandbox Code Playgroud)

transclusion angular2-ngcontent angular

5
推荐指数
1
解决办法
3473
查看次数

将平面对象数组转换为嵌套对象

我有以下数组(实际上来自后端服务):

const flat: Item[] = [
    { id: 'a', name: 'Root 1', parentId: null },
    { id: 'b', name: 'Root 2', parentId: null },
    { id: 'c', name: 'Root 3', parentId: null },

    { id: 'a1', name: 'Item 1', parentId: 'a' },
    { id: 'a2', name: 'Item 1', parentId: 'a' },

    { id: 'b1', name: 'Item 1', parentId: 'b' },
    { id: 'b2', name: 'Item 2', parentId: 'b' },
    { id: 'b2-1', name: 'Item 2-1', parentId: 'b2' },
    { id: …
Run Code Online (Sandbox Code Playgroud)

javascript recursion nested typescript

5
推荐指数
1
解决办法
4749
查看次数

Angular Express 重定向

我有我的 ssr 响应服务,其中包括重定向方法:

import { Injectable, Inject } from '@angular/core';

import { Response } from 'express';
import { RESPONSE } from '@nguniversal/express-engine';

@Injectable()
export class SsrResponseService {
  constructor(@Inject(RESPONSE) private response: Response) {}

  redirect(url: string, code?: number) {
    if (!!code) {
      return this.response.redirect(code, url);
    } else {
      return this.response.redirect(url);
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

然后,在我的组件中,如果不满足某些条件,我需要重定向用户:

this.responseService.redirect('/some-other-url', 301);
Run Code Online (Sandbox Code Playgroud)

重定向工作正常,用户被重定向,但服务器记录:

Unhandled Promise rejection: Can't set headers after they are sent. ; 
Zone: <root> ; Task: Promise.then ; Value: Error: Can't set headers after they are …
Run Code Online (Sandbox Code Playgroud)

redirect express angular-universal angular

3
推荐指数
1
解决办法
1920
查看次数

Backbone无法读取骨干视图中未定义错误的属性"属性"

我刚刚决定学习骨干.我正在关注视频教程.一切都在那里工作正常,但在我的结尾我得到这个错误"Uncaught TypeError:无法读取未定义的属性'名称'".

这是我的代码:


    var MenuItemDetails = Backbone.View.extend({
        render: function() {
            var markup = this.options.name + this.options.category + this.options.imagepath;
            // I also had some html markup in the string above, of course, but I've striped it because stackoverflow didn't show it in the preview of my post.
            this.$el.html(markup);
            return this;
        }
    });

    var AppRouter = Backbone.Router.extend({
        routes: {
            "" : "list",
            "menu-items/new" : "itemForm",
            "menu-items/:item" : "itemDetails"
        },

        list: function() {
            $('#app').html('List screen');
        },

        itemDetails: function(item) {
            var view = new …

javascript backbone.js backbone-views

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