小编Sim*_*n H的帖子

Angular2更改检测:ngOnChanges未针对嵌套对象触发

我知道我不是第一个问这个的人,但我在前面的问题中找不到答案.我有一个组件

<div class="col-sm-5">
    <laps
        [lapsData]="rawLapsData"
        [selectedTps]="selectedTps"
        (lapsHandler)="lapsHandler($event)">
    </laps>
</div>

<map
    [lapsData]="rawLapsData"
    class="col-sm-7">
</map>
Run Code Online (Sandbox Code Playgroud)

在控制器中rawLapsdata不时变异.

laps,数据以表格格式输出为HTML.每当rawLapsdata发生变化时,这都

我的map组件需要ngOnChanges用作在Google地图上重绘标记的触发器.问题是当rawLapsData父项中的更改时,ngOnChanges不会触发.我能做什么?

import {Component, Input, OnInit, OnChanges, SimpleChange} from 'angular2/core';

@Component({
    selector: 'map',
    templateUrl: './components/edMap/edMap.html',
    styleUrls: ['./components/edMap/edMap.css']
})
export class MapCmp implements OnInit, OnChanges {
    @Input() lapsData: any;
    map: google.maps.Map;

    ngOnInit() {
        ...
    }

    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
        console.log('ngOnChanges = ', changes['lapsData']);
        if (this.map) this.drawMarkers();
    }
Run Code Online (Sandbox Code Playgroud)

更新: ngOnChanges不起作用,但看起来好像正在更新lapsData.在ngInit中,还有一个用于缩放更改的事件侦听器,它也会调用this.drawmarkers.当我改变变焦时,我确实看到了标记的变化.所以唯一的问题是我在输入数据发生变化时没有收到通知.

在父母,我有这条线.(回想一下,变化反映在圈数中,但不反映在地图中). …

angular

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

为什么YYYY-MM-DD!= YYYY/MM/DD

在Chrome中,我们有些奇怪

> new Date("2014-01-01") - new Date("2014/01/01")
< 3600000
Run Code Online (Sandbox Code Playgroud)

这是因为

new Date("2014-01-01")
Wed Jan 01 2014 01:00:00 GMT+0100 (CET)
Run Code Online (Sandbox Code Playgroud)

new Date("2014/01/01")
Wed Jan 01 2014 00:00:00 GMT+0100 (CET)
Run Code Online (Sandbox Code Playgroud)

为什么' - '似乎增加1小时的时间?

javascript

51
推荐指数
2
解决办法
1752
查看次数

如何安装谷歌地图的Typescript类型

怎么做 - 我尝试过组合

typings install [googlemaps | google.maps] [--ambient] --save
Run Code Online (Sandbox Code Playgroud)

并最终得到此错误的变化

打字ERR!消息无法在注册表中找到"npm"的"googlemaps".

根据Amy的建议,我也下载到相关目录并添加

/// <reference path="main/ambient/google.maps/google.maps.d.ts" />
Run Code Online (Sandbox Code Playgroud)

到我的main.d.ts(一个明显被阅读的文件,因为我没有得到其他错误).

我在网上找不到任何回答这个问题的内容

我的最终目标是摆脱这种错误

错误TS2503:找不到命名空间'google'.

typescript

44
推荐指数
10
解决办法
5万
查看次数

vite 文件名中不带哈希值

我正在尝试编译一个基于 monaco 编辑器的 Web 组件(在 lit 元素上下文中)。尝试了很多选项后,我现在将结果缩减为两个文件

  • rmx-monaco.abc123.js
  • style.css

我的首要任务是摆脱散列(abc123),但我也想将 js 和 css 缩减为一个文件。提前致谢

我的配置如下:

import { resolve } from "path";

export default defineConfig({
    base: "/",
    build: {
        rollupOptions: {
            input:
                // main: resolve(__dirname, "index.html"),
                resolve(__dirname, "src/rmx-monaco.ts"),

            output: {
                // Prevent vendor.js being created
                manualChunks: undefined,
                // chunkFileNames: "zzz-[name].js",
                // this got rid of the hash on style.css
                assetFileNames: "assets/[name].[ext]",
            },
        },
        // Prevent vendor.css being created
        cssCodeSplit: false,
        // prevent some warnings
        chunkSizeWarningLimit: 60000,
    },
});
Run Code Online (Sandbox Code Playgroud)

我的 …

rollup vite

26
推荐指数
3
解决办法
3万
查看次数

Angular-ui.router:更新URL而不刷新视图

我有一个Angular SPA,根据一些餐馆数据的不同削减,提供各种推荐列表和谷歌地图,(见m.amsterdamfoodie.nl).我希望这些列表中的每一个都有自己的URL.为了让Google抓取不同的列表,我使用了<a>用于offcan数据导航的标签.

目前,<a>标签会导致视图刷新,这对于地图非常明显.

  • 我可以使用ng-click和阻止这种情况$event.preventDefault()(参见下面的代码片段),但是我需要实现一种更新浏览器URL的方法.
  • 但是在尝试Angular $state或浏览器时history.pushstate,我最终会触发状态更改和视图刷新......!

因此,我的问题是如何更新模型和URL,但不刷新视图? (另请参阅Angular/UI-Router - 如何在不刷新所有内容的情况下更新URL?)

我已经尝试了很多方法,目前有这个HTML

<a href="criteria/price/1" class="btn btn-default" ng-click="main.action($event)">Budget</a>
Run Code Online (Sandbox Code Playgroud)

在控制器中:

this.action = ($event) ->
    $event.preventDefault()
    params = $event.target.href.match(/criteria\/(.*)\/(.*)$/)

    # seems to cause a view refresh
    # history.pushState({}, "page 2", "criteria/"+params[1]+"/"+params[2]);

    # seems to cause a view refresh
    # $state.transitionTo 'criteria', {criteria:params[1], q:params[2]}, {inherit:false}

    updateModel(...)
Run Code Online (Sandbox Code Playgroud)

并且,我认为发生的是我触发$stateProvider代码:

angular.module 'afmnewApp'
.config ($stateProvider) ->
  $stateProvider
  .state 'main',
    url: '/' …
Run Code Online (Sandbox Code Playgroud)

seo angularjs single-page-application angular-ui-router

23
推荐指数
2
解决办法
2万
查看次数

优化从文件读取Haskell数据

我试图在一个3.5米的行文件上实现Kosaraju的图算法,其中每行是两个(空格分隔)Ints代表图形边缘.首先,我需要创建一个摘要数据结构,其中包含节点及其传入和传出边的列表.下面的代码实现了这一点,但需要花费一分多钟,而我可以从MOOC论坛上的帖子看到使用其他语言的人在"10"中完成.(getLines在我读到的基准测试中,与10岁以下相比需要10分钟.)

我是Haskell的新手,已经实现了一种使用累积方法foldl'(这'是一种突破性的终止方法),但它在风格方面感觉相当紧迫,我希望这就是它运行缓慢的原因.此外,我目前正计划使用类似的模式进行深度优先搜索,我担心这一切都会变得太慢.

我发现这个演示文稿博客谈论这些问题,但在专家级别上.

import System.IO
import Control.Monad
import Data.Map.Strict as Map
import Data.List as L

type NodeName = Int
type Edges = [NodeName]
type Explored = Bool

data Node = Node Explored (Edges, Edges) deriving (Show)

type Graph1 = Map NodeName Node

getLines :: FilePath -> IO [[Int]]
getLines = liftM (fmap (fmap read . words) . lines) . readFile

getLines' :: FilePath -> IO [(Int,Int)]
getLines' = …
Run Code Online (Sandbox Code Playgroud)

haskell

13
推荐指数
1
解决办法
441
查看次数

VS Code不能使用/ jspm_packages; systemjs无法看到angular2 ts文件

我正在使用JSPM创建一个基本的Angular 2工作流程.它可以工作(请参阅https://github.com/simonh1000/Angular2-beta-jspm),但我没有得到intellisense,因为VS Code没有看到Angular jspm模块,如图中所示.我该怎么办?

Intellisense无法看到jspm模块

这是我的,tsconfig.json包括埃里克的建议:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "moduleResolution": "node"
  }
}
Run Code Online (Sandbox Code Playgroud)

我可以通过使用这种import语句在VS Code中取得一些进展

import { Component, View } from '../jspm_packages/npm/angular2@2.0.0-beta.0/ts/core';
Run Code Online (Sandbox Code Playgroud)

但是当我运行它时,我得到一个错误:

GET http://127.0.0.1:8080/jspm_packages/npm/angular2@2.0.0-beta.0/ts/core.js
Run Code Online (Sandbox Code Playgroud)

这是config.js的摘录

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "typescript",
  typescriptOptions: {
    "module": "commonjs",
    "emitDecoratorMetadata": true
  },
  paths: {
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
  },

  packages: {
    "app": {
      "main": "main",
      "defaultExtension": "ts"
    }
  },
Run Code Online (Sandbox Code Playgroud)

visual-studio-code angular

12
推荐指数
1
解决办法
1874
查看次数

md-list> md-item上的角度材料设计波纹

我有一个项目列表(每个项目包括多个元素),每个项目都可以点击并切换视图.有没有办法在整体上获得涟漪效应md-item-content?我试过class="ripple"但这还不够.

<md-content>
    <md-list layout="column" md-padding>
        <md-item ng-repeat="resto in list.data.recommendations">
            <a ui-sref="resto({qname: resto.qname})" class="ripple">
              <md-item-content id="resto{{$index}}">
                 ...
Run Code Online (Sandbox Code Playgroud)

angularjs material-design angular-material

11
推荐指数
3
解决办法
2万
查看次数

榆树中的数据持久性

我刚刚开始考虑使用它构建一个简单的Web应用程序.我的想法是要求在浏览器中保留一些用户数据.

有没有办法直接使用Elm处理数据持久性?例如在浏览器会话甚至本地存储中?或者我应该使用端口来使用JavaScript吗?

elm

11
推荐指数
3
解决办法
2313
查看次数

唤醒锁在浏览器中有效,但不能作为 PWA

我有一个使用唤醒锁的网络应用程序(见下文) - 我已经注册了原始试用版并将代码添加到我的index.html 中。- 请参阅https://lucid-franklin-4016c2.netlify.com/

当我在最新版本的 Android Chrome 中加载页面时,手机保持唤醒状态,并且我用于此运行应用程序的文本转语音消息工作正常。

我还将其设置为 PWA(服务工作者、清单……- 在灯塔中一切都很好)。然而,在“将页面添加到主屏幕”并从那里加载 PWA 后,手机确实会进入睡眠状态。它会继续计算时间,并可以在后台播放声音文件,但文本转语音功能已停用。

这是预期的行为吗?

我的关键需求是文本到语音转换,而不是让手机保持清醒状态,因为无论如何,地理定位似乎在手机睡眠状态下都可以工作。我还有其他事情可以做吗?

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a wake lock.
export const requestWakeLock = async cb => {
    try {
        wakeLock = await navigator.wakeLock.request("screen");
        wakeLock.addEventListener("release", () => {
            console.log("Wake Lock was released");
        });
        console.log("Wake Lock is active");
    } catch (err) {
        console.error(`${err.name}, ${err.message}`);
        cb({
            tag: "error",
            payload: "wakeLock not supported"
        });
    }
};
Run Code Online (Sandbox Code Playgroud)

google-chrome wakelock progressive-web-apps android-chrome

10
推荐指数
1
解决办法
2298
查看次数