小编Clé*_*ops的帖子

我正在清理我的angular2项目,由于很多原因,我决定从种子开始.这个.

这个种子使用HMR,但我不完全明白它的目的是什么.

一开始,我认为HMR是关于动态加载和在Web应用程序运行时替换组件.

但是既然我把眼睛放在了眼前app.service.ts,我迷路了.这是这项服务的代码:

import { Injectable } from '@angular/core';
import { HmrState } from 'angular2-hmr';

@Injectable()
export class AppState {
  // @HmrState() is used by HMR to track the state of any object during a hot module replacement
  @HmrState() _state = { };

  constructor() {

  }

  // already return a clone of the current state
  get state() {
    return this._state = this._clone(this._state);
  }
  // never allow mutation
  set state(value) {
    throw new Error('do …

我发现了VueJS,我并不完全理解updated和观察者之间的区别.

更新了钩子

这是一个生命周期的钩子.根据官方文档,只要数据发生变化,就会触发它.因此,无论何时更新a prop或a data(值,而不仅仅是指针),都会updated被调用.

看守

在文档中,观察者与计算属性进行比较.但在哪种情况下最好使用更新而不是观察者？

看起来在这两种情况下,调用回调时DOM都不会更新(nextTick()如果我们想要操纵DOM中的更改,则需要更新).我看到的唯一区别watchers是只有当一个精确属性(或数据)被更新时才会触发,其中updated总是被调用.

updating如果我们可以更准确(watchers),我无法弄清楚数据何时更改()更新的优点.

这是我的想法.

谢谢 :)

我还在使用Angular2进行项目.如果您想了解我需要做什么的更多详细信息,请参阅此问题.

我有一个AppComponent通过引导bootstrap.这是一个非常简单的组件:

@Component({
    selector: 'app-view',
    directives: [ Devtools, MainComponent ],
    template: `
        <ngrx-devtools></ngrx-devtools>
        <main-cmp></main-cmp>
    `
})
export class AppComponent { }

该组件包括另一个组件:( MainComponent通过main-cmp选择器).出于某些原因,我想设置我的路由MainComponent.

这是代码:

@Component({ 
    selector: 'main-cmp',
    directives: [ ROUTER_DIRECTIVES, NavComponent ],
    template: `
        <h1>App</h1>
        <nav-cmp></nav-cmp>
        <router-outlet></router-outlet>
    `
})
@RouteConfig([
    { path: '/home',    name: 'Home',   component: HomeComponent,   useAsDefault: true },
    { path: '/medias',  name: 'Medias', component: MediasComponent }
])
export class MainComponent {
    constructor (private router:Router, private store:Store<AppStore>) { …

我正在使用 Angular 2 开展一个项目，但遇到了一个问题。我创建了一个链接组件，我可以这样使用它：

<cmp-link [routeName]="['Channel/Add']">Add channel</cmp-link>

该组件检查当前路由是否与通过参数传递的路由相同，如果是，则应用一个类。如何检查当前 url 是否与 提供的 url 相同routeName？好吧，它很丑。

this.isCurrentRoute = this.normalize(currentUrl) === this.routeName[0].toLowerCase();

你不喜欢吗？我也不。我想检查当前是否使用路线名称激活了路线。

（在这种情况下，Channel/Add是路由名称）。

我不知道如何使用路线名称来做到这一点。我看过Router和Instruction。

上下文

我正在构建一个VueJS应用程序,我想将它推向生产.我使用了生成文件,npm run build并且已经将它们上传到服务器(IIS)上.

我在这台服务器上有很多其他应用程序,我无法改变它的工作原理.

这是一个假的例子来帮助我解释我的问题:

mydomain.com/app1将重定向到文件夹下的Web应用程序app1.为了添加我的VueJS项目,我创建了一个新文件夹 - 比方说vueapp- 我可以通过它访问它mydomain.com/vueapp.

问题是:vue生成的静态路径没有前缀vueapp.路径index.html不是我想要的:我得到的mydomain.com/static/**不是mydomaim.com/vueapp/static/**vue请求.

我想index.html通过一些东西告诉webpack前缀的路径,但我无法让它工作.

assetsSubDirectory

config/build.js让我们可以更改资产子目录(static默认情况下).所以我可以设置它,vueappPrefix/static但当然,这不起作用.

• 预期: mydomain.com/vueapp/vueappPrefix/static/*
• 我得到了什么: mydomain.com/vueappPrefix/static

这很明显.

当然我可以index.html手工编辑或添加脚本来完成它,但我想知道是否有更简洁的方法来做到这一点.

非常感谢.

我正在通过Babel在NodeJS env中编写ES6.所以这是我的.babelrc文件:

{
  "presets": ["es2015", "stage-2"],
  "plugins": []
}

是的,非常简单.我正在使用npm脚本来启动命令:

"build-server": "babel server/lib -d server/dist",
    "build-server:w": "babel server/lib -w -d server/dist",

而且效果很好.在server/,我有一个lib包含我的源代码的dist文件夹和一个包含'babel-code' 的文件夹.

通常,我可以这样写:

import { ModuleAPI } from './api/moduleAPI';
import { path } from 'path';
import { fs } from 'fs';
import { express } from 'express';
let app = express();

这被成功地转化为:

'use strict';

var _moduleAPI = require('./api/moduleAPI');

var _path = require('path');

var _fs = require('fs');

var _express = require('express');

var …

我正在使用systemJS来管理我的包,所以我已经将这些行添加到我的systemjs的配置文件中:

{
  map: { 'ng2-file-upload': 'node_modules/ng2-file-upload' },
  packages: {
    'ng2-file-upload': {
        main: './ng2-file-upload/ng2-file-upload.js', // also tried with './ng2-file-upload.js'
        defaultExtension: 'js'
    },
  }
}

我导入NG2文件上传通过import { FileDrop, FileUploader } from 'ng2-file-upload';.

但导入导致我的应用程序"崩溃":我的typscript编译器似乎运行良好(我可以看到由于其他代码的日志),但修改不再被转换,所以我不能运行任何东西.我没有与ng2-file-upload相关的任何错误日志(除了很多Duplicate identifiers).

任何的想法 ？

编辑:我已经将这个包从node_modules我的应用程序(vendor)附近的文件夹中提取出来,并且我使用了相对路径导入FileDrop,FileUploader但是systemjs无法导入:

Error: SyntaxError: Unexpected token <(…)

编辑2:这是一些细节.我的应用程序在public其中包含2个子文件夹:src和build.我在里面写了ts代码src(很明显),我的tsc将转换后的文件保存到build.目前,我没有捆绑我的文件,因此里面的层次结构build与那个层次结构相同src.

但只有ng2-file-upload才会发生奇怪的事情:在转换过程中,tsc会在node_modules/ng2-file-upload里面添加一个文件夹build.这是树木: …

在开始之前,这个链接很有用:HMR的目的是什么？.

我在巨大的项目管理/构思方面没有丰富的经验.我还年轻,留着美丽的胡须.所以我在这里,寻找建议.

种子

我正在寻找和思考角度2的种子,我想知道使用HMR是否是开发大型应用程序以及如何做到这一点的可行选择.

那些只是,我只是想与你讨论做出我的决定.我们都需要跨越我们的经验:-)

数据结构

基于这个例子:

@Component({
  selector: 'home',
  templateUrl: `
    <form (ngSubmit)="submitState(localState.value)" autocomplete="off">

      <input
        [value]="localState.value"
        (input)="localState.value = $event.target.value"
        placeholder="Submit Local State to App State">

      <button>Submit Value</button>
    </form>
  `
})
export class HomeComponent {
  localState = { value: '' };

  constructor(public appState: AppState, public title: Title) {}

  onSubmit(value: string) {
    this.appState.set('value', value);
    this.localState.value = '';
  }
}

通过使用appState,可以动态重新加载组件并注入数据.听起来很酷.但这是我的第一个问题:要启用此功能,组件必须在appstate树中有一个位置,因此localState在示例中使用like 是个好主意.这迫使我们使用组件内部的对象,这可能是巨大的.这可能很烦人.你同意吗 ？这可能是大型应用程序的问题吗？(我打算在大型应用程序上工作).

它可能没什么,因为我只需要存储localStorage我希望被HMR跟踪的数据.那么为什么不呢.

数据存储

谈到存储,我也使用@ngrx/store作为Redux的实现.这似乎是一个非常好的主意,因为国家可以是我的localStorage.当应用程序更新时,我只需要补充我的状态就可以了.hmr不会跟踪组件中的数据,只有状态才会跟踪.

听起来不错.但这是个好主意吗？我试图找到一个连接器来处理@ngrx/store和hmr之间的通信. 胜利!但这个套餐似乎已经过时了.

我可以自己做,但这是个好主意吗？ …