我已经构建了一个router 3.0.0-beta.1用于在应用程序部分之间切换的应用程序 我还location.go()用来模拟同一页面的子部分之间的切换.我使用<base href="/">了一些URL重写规则,以便index.html在页面刷新的情况下重定向所有路由.这允许路由器接收所请求的子部分作为URL参数.基本上我设法避免使用HashLocationStrategy.
routes.ts
export const routes: RouterConfig = [
{
path: '',
redirectTo: '/catalog',
pathMatch: 'full'
},
{
path: 'catalog',
component: CatalogComponent
},
{
path: 'catalog/:topCategory',
component: CatalogComponent
},
{
path: 'summary',
component: SummaryComponent
}
];
如果我点击导航栏中的子部分,则会发生以下情况:
logation.go() 使用必要的字符串更新URL以指示当前子节scrollTo()动画会在请求的子部分顶部滚动页面.如果我刷新页面,我使用先前定义的路线并提取必要的参数以恢复滚动到所请求的子部分.
this._activatedRoute.params
.map(params => params['topCategory'])
.subscribe(topCategory => {
if (typeof topCategory !== 'undefined' &&
topCategory !== null
) {
self.UiState.startArrowWasDismised = true;
self.UiState.selectedTopCategory = topCategory;
} …我一直在阅读一些关于Web组件的教程(本机,没有聚合物).我已经看到了两种注册组件的方法,我对使用什么感到困惑.对于第二个,我实际上在vscode中收到了一个打字稿错误:[ts] Property 'registerElement' does not exist on type 'Document'. Did you mean 'createElement'?
/**
* App
*/
export class App extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = this.template;
}
get template() {
return `
<div>This is a div</div>
`;
}
}
// What is the difference between these two methods?
window.customElements.define('vs-app', App);
document.registerElement('vs-app', App);
我想在app.component.html模板中显示路由的名称.我正在寻找一个简单的解决方案,可以像这样编写:
{{router.currentRoute.name}}
我当前的路由器配置:
export const routes: RouterConfig = [
{
path: '',
redirectTo: '/catalog',
pathMatch: 'full'
},
{
path: 'catalog',
name: 'Catalog', // Is this property deprecated?
component: CatalogComponent
},
{
path: 'summary',
name: 'Summary',
component: SummaryComponent
}
];
我使用FormGroup和FormControlstoghether与ngrx建立一个反应形式.此外,我正在使用Chrome redux的Inspector redux dev-tools.我想在跳过某些表单更改操作时正确呈现操作历史记录.目前,在最后一个表单操作之前跳过任何表单操作都不会进行投影,就像没有进行特定的表单更改一样.表单发送一个完整的对象,其中应用了所有字段.因此,之前操作的任何更改都会变得模糊,因为每个操作都会替换窗体状态的所有先前属性.
一点上下文:person当用户在模态中填写表单时,我在状态存储中存储了一个对象.然后submit我将person数据发送到服务器.
表单组件
// Emit events when form changes
this.personForm.valueChanges
.debounceTime(500)
.subscribe(person => {
// Block @Input person update from triggering a form change
if (this._personFormInputUpdated === true) {
// Reset @Input safe-guard
this._personFormInputUpdated = false;
return;
}
// Ignore unchaged form
if (!this.personForm.dirty) { return; }
debug('Person form changed');
this.personChange.emit(Object.assign({}, person));
});
减速机:
case AccountsDataActions.STASH_ACCOUNT_PERSON:
newState = Object.assign({}, state, {
stashedAccountPerson: Object.assign({}, state.stashedAccountPerson, …我正在使用swager-jsdoc来记录应用程序的所有 DTO。
我想知道有什么方法可以从打字稿界面自动生成 swagger 文档。
我在项目中有很多它们，还有很多猫鼬模式和模型。让它们保持同步变得很乏味。另一方面，我不想使用 swagger 生成工具。我更喜欢自下而上的方法。
干杯
我已经开始尝试 webpack 和 webcomponents。到目前为止，我只在没有 webpack 的情况下运行了这个基本的 Web 组件示例。index.html如果我只是使用标签加载 Web 组件，<script>那么我就会得到渲染的内容。但是，当我尝试使用基本的 webpack 设置运行相同的示例时，我看不到渲染的模板。
服务器已成功启动，我可以看到控制台初始化消息。缺少什么步骤？我希望能够以这种方式连接它们。
我有以下文件：
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<meta charset="UTF-8">
<title>Web Components App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<vs-app></vs-app>
</body>
</html>
主要.ts
module.hot && module.hot.accept();
// Components
import { App } from './app';
// Styles
require('./shared/scss/main.scss');
console.log('Initialise Main');
应用程序.ts
/**
* App
*/
export class App extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = this.template;
}
get template() …我正在开发一款将会变得非常庞大的应用程序.我决定使用JsDoc3并DocStrap记录所有模块.模块通过require.js定义,在某些地方,它们最多嵌套3或4级.
直到现在我才明白JsDoc文档分为四个主要部分:模块,类,教程,全局.每个部分都有一个标题下拉菜单和一个侧边栏,每个标题按字母顺序列出liniar方式的所有模块.
我想知道是否有选项来显示/分组模块和类以某种方式反映项目结构.我看到了一个git存储库,它记录了所有带有大量斜线的类module1/submodule1/class1,但感觉真的是要挖掘这种类型的导航.更不用说布局在侧边栏溢出的长标题方面遇到了麻烦.
目前我的项目布局类似于下面的架构.它广泛而深入,我希望它能够进一步发展.
/Editor
---/Services
------/UI
------...
---...
---editorApp.js
/Engine
---/Core
------/...
---/Entities
------/...
---/Graphics
------/...
---/...
...
engine.js
/Web
---/Services
------/UI
------...
---...
---webApp.js
我正在设计一种仅在输入模糊或按下输入键时才更新某些ui部件的表单。我是反应形式的忠实拥护者，并且我试图找出正确的方法。到目前为止，我还没有找到太多反应式的答案。它们中的大多数都集中在模板驱动的表单上。到目前为止，我得到的是这样的：
表单组件动态表单值在运行时更改（没有可预测的文件名）
import { Component, Input, Output, EventEmitter,
ChangeDetectionStrategy } from '@angular/core'
import { FormBuilder, FormGroup, FormControl } from '@angular/forms'
import { Observable } from "rxjs/Observable"
import { DEBUG } from '../../../../config/config'
import * as Debug from 'debug'
// Interfaces
import { Foo } from '../../interfaces/foo'
// Services
import { FooService } from '../../services/foo.service'
// Debug
const debugOff = (...any) => { }, debug = Debug('app:FooCmp')
@Component({
selector: 'foo-data-cmp',
templateUrl: './foo.data.cmp.html',
changeDetection: ChangeDetectionStrategy.OnPush,
styleUrls: ['./foo.data.cmp.css']
})
export class FooDataCmp …我使用了很多自定义事件，打字稿静态检查中的一个盲点是CustomEvent. 由于这个盲点，很多重构都会受到影响。为了弥补，我为CustomEvent. 因为我在整个应用程序中都使用它，所以我不想只为这种类型在所有地方都导入。
globals.d.ts - 通用自定义事件
interface VsCustomEvent<T> extends CustomEvent { detail: T }
我原以为这会奏效
handleSomeEvent = ({detail}: CustomEvent<boolean> ) => {
this.doSomething(detail)
}
有没有比全局通用更好的解决方案？
我正在研究日期格式化的moment.js和我在这些令牌来了:有没有之间的任何差别显著WoY和WoY ISO？
一周的一周
w - 1 2 ... 52 53
wo - 1st 2nd ... 52nd 53rd
ww - 01 02 ... 52 53
一年中的一周(ISO)
W - 1 2 ... 52 53
Wo - 1st 2nd ... 52nd 53rd
WW - 01 02 ... 52 53
javascript ×7
angular ×4
typescript ×4
ecmascript-6 ×2
forms ×2
jsdoc ×1
jsdoc3 ×1
momentjs ×1
ngrx ×1
openapi ×1
swagger ×1
webpack ×1