小编Shu*_*sky的帖子

有一种简单的方法可以跟踪浏览器滚动位置并通知多个组件吗？

使用案例:在滚动时,我希望能够根据我的位置更改页面上各种元素的类.在以前版本的角度中,它有点可能通过插件(对于jQuery来说相同).当然,可以选择编写裸JS来在应用程序启动时初始化它并发出一个事件,但这听起来很脏,并且事件发射对于这类事情而言相当昂贵.

我有什么选择？

更新(建议后):

这是我尝试过的:

我创建了一个组件:

import {Component} from "angular2/core";

@Component({
    selector: '[track-scroll]',
    host: {'(window:scroll)': 'track($event)'},
    template: ''
})

export class TrackScrollComponent {
    track($event) {
        console.debug("Scroll Event", $event);
    }
}

在app的主指令中添加了一个属性:

<priz-app track-scroll>

并将该组件添加为顶级组件中的提供者之一:

import {TrackScrollComponent} from "../../shared/components/track-scroll.component";

@Component({
  selector: 'priz-app',
  moduleId: module.id,
  templateUrl: './app.component.html',
  directives: [ROUTER_DIRECTIVES, SecureRouterOutlet, AppHeader, TrackScrollComponent],
  providers: [AuthenticationService]
})

依然没有...

另一个更新:

移动track-scroll到主模板的div元素之一:

<div class="container-fluid" track-scroll>
    <div class="row">
        <div class="col-md-12">
            <app-header></app-header>
            <secure-outlet signin="Login" unauthorized="AccessDenied"></secure-outlet>
        </div>
    </div>
</div>

现在,应用程序加载了一个完全空的屏幕.FUN FUN FUN ...

最终解决方案(对我有用).

1. 定义指令:

import {Directive} …

这是一个有趣的问题,我有点无视,直到现在.似乎Angular2在指令标记内呈现内容.但是,对于路由器插座,它恰好就像一个兄弟姐妹.

我的第一个问题是:为什么？只是出于兴趣.

我不会太担心,但它现在实际上导致我的应用程序出现问题.我有两个嵌套的出口,由于一些莫名其妙的原因,孩子一个在页面上占据15px的高度,并不重要我做什么,我无法摆脱它.(见截图)

我所描述的确是如此,或者我只是做错了什么？此外,我不知道在这一点上如何处理这个,搜索到了所有,没有找到任何东西.

谢谢你的帮助.

这里更新是我的文件:

@import "../../node_modules/bootstrap-less/bootstrap/bootstrap";
@import "../../node_modules/font-awesome/less/font-awesome";
@icon-font-path: "./bootstrap/fonts/";
@fa-font-path: "./font-awesome/fonts";
@import "rrm.less";

html, body {
  height: 100% !important;
}
body {
  padding-top: 80px;
}
.load-container {
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  .loaing {
    position: fixed;
    left: 50%;
    top: 35%;
    z-index: 1000;
    height: 31px;
    width: 31px;
  }
}
.top-navbar {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background-color: #FFFFFF;
  height: 80px;
  &.floating {
    .box-shadow(0 1px 3px rgba(0,0,0,.25));
  }
  .navbar-brand {
    height: …

Angular2慢慢但肯定地进步.现在我遇到了以下挑战.我想检查用户是否在每次页面更改时登录(换句话说,在每个组件的加载时).当然,我可以在每一个中实现OnInit接口,但这就是代码味道.

是否有任何有效的方法来执行应用程序的每个页面上所需的任何内容？我很想听听有关如何处理此任务的最佳实践的任何其他建议.

我正在使用这个库(https://auth0.com/blog/2015/11/10/introducing-angular2-jwt-a-library-for-angular2-authentication/)进行基于jwt的登录,我已经有了很好的服务封装所有与身份验证相关的功能的类.因此,实际检查用户登录的位置已经完成并经过测试.

谢谢,

我有一个 grails 应用程序，它已经运行并通过 Tomcat8 Jre8 上的 Elastic Beanstalk 部署到 AWS。

我现在试图将它部署在多 docker 环境中，但我的行为很奇怪。

我使用tomcat:8.0-jre8（https://hub.docker.com/r/library/tomcat/）作为容器的映像，并且在该映像上的部署非常简单，只需在<tomcat_home>/webapps. 另外，我正在将端口映射8080到外部世界。因此，docker-compose 的相关部分如下所示：

api:
  image: tomcat:8.0-jre8
  container_name: api
  volumes:
    - ./deployment/api:/usr/local/tomcat/webapps
  external_links:
    - mysql:mysql
  ports:
    - "8080:8080"

根据日志，应用程序已成功部署，甚至 liquibase 迁移也正在应用：

21-Nov-2016 07:11:03.671 INFO [localhost-startStop-1] org.apache.catalina.startup.HostConfig.deployWAR Deploying web application archive /usr/local/tomcat/webapps/priz-0.5.war
21-Nov-2016 07:12:12.496 INFO [localhost-startStop-1] org.apache.jasper.servlet.TldScanner.scanJars At least one JAR was scanned for TLDs yet contained no TLDs. Enable debug logging for this logger for a complete list of JARs …

我们刚刚开始在我们的两个主要项目中使用 monorepo 和纱线工作区。一个最初是基于 Angular 11 构建的，另一个是在 React 中构建的。

我们设置了纱线工作区，并且在一个项目（Angular）上一切都运行得很好。反应方虽然接错了babel-loader。

这是当前的文件夹结构：

root
|--package.json
|--node_modules
|  |--"babel-loader": "8.1.0"
|--hub
|  |--package.json
|  |--node_modules
|     |-- <no babel-loader here>
|--platform
|  |--package.json
|  |--node_modules
|     |--"babel-loader": "8.2.3"
...

根package.json：

{
  "private": true,
  "workspaces": [
    "platform",
    "hub",
    "shared"
  ]
}

中心package.json

{
  "name": "hub",
  "version": "0.1.0",
  "license": "MIT",
  "private": true,
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest --maxConcurrency=2 --maxWorkers=2",
    "eslint": "eslint 'src/app/**/*.{js,jsx,ts,tsx}'",
    "eslint:fix": "eslint --fix 'src/app/**/*.{js,jsx,ts,tsx}'", …

我正在使用Slick构建比平凡查询少的东西。在此过程中，我意识到Slick使用子查询而不是直接使用表创建联接。

这是构建查询的代码：

val baseProgramSearchQuery = Programs.programs join
    Schools.schools on ((p, s) => p.schoolId === s.id && s.deletedAt.isEmpty) joinLeft
    Addresses.addresses on { case ((_, s), a) => s.addressId === a.id && a.deletedAt.isEmpty } joinLeft
    Medias.medias on { case (((_, s), _), m)  => s.mediaId === m.id && m.deletedAt.isEmpty }

  def search(searchCriteria: SearchCriteria,
             drop: Long = 0,
             take: Long = 100): Future[Seq[(Program, School, Option[Address], Option[Media])]] = {

    val q = for {
      (((program, school), address), schoolLogo) <- baseProgramSearchQuery
        .filter {

          case (((programs, …

我们使用的是Angular 6和Redux.

其中一个组件的初始化如下所示:

ngOnInit() {
    this.parameterActions.loadParameters();
    this.principleActions.loadPrinciples();
    this.domainPrincipleActions.loadDomainPrinciples();
    this.domainActions.loadDomains();
    this.matrixElementActions.loadMatrixElements();

    const stepParam = +this.route.snapshot.queryParamMap.get('step');
    this.currentStepIndex = stepParam ? stepParam - 1 : 0;

    this.fortyPrinciplesUtilization$ = this.route.paramMap.pipe(
      switchMap((params: ParamMap) => {
        this.projectId        = +params.get('id');
        this.utilizationId    = +params.get('utilizationId');

        this.projectToolUtilizationActions.loadProjectTools(this.projectId);

        return this.store.select<FortyPrinciplesUtilization>(
          ['projectToolsMap', this.projectId, 'tools', this.utilizationId]
        ).pipe(
          tap(utilization => utilization && this.buildFormGroup(utilization))
        );
      })
    );
  }

要注意的主要是初始化fortyPrinciplesUtilization$.在同一个组件中,有任何函数可以调用projectToolUtilizationActions函数,这些函数随后fortyPrinciplesUtilization$会在Redux中进行更新.

以下是为将状态设置为以下而构建的函数之一complete:

confirmComplete() {
    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
      data: {
        confirmTitle: 'Please, confirm',
        confirmContent: 'You are about mark …

我正在为我的应用程序使用angular（7）cli。我最近将哨兵集成功能添加到了该应用中，并且在构建产品时遇到错误：

    ERROR in ./node_modules/@sentry/utils/esm/is.js
Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
Error: File lib.dom.d.ts does not have a sourceFile.
    at Object.getSourceFile (/Users/shurikag/PRIZ/dev/priz-fe/node_modules/@angular-devkit/build-optimizer/src/helpers/transform-javascript.js:86:23)
    at findSourceFile (/Users/shurikag/PRIZ/dev/priz-fe/node_modules/typescript/lib/typescript.js:87549:29)
    at /Users/shurikag/PRIZ/dev/priz-fe/node_modules/typescript/lib/typescript.js:87457:85
    at getSourceFileFromReferenceWorker (/Users/shurikag/PRIZ/dev/priz-fe/node_modules/typescript/lib/typescript.js:87424:34)
    at processSourceFile (/Users/shurikag/PRIZ/dev/priz-fe/node_modules/typescript/lib/typescript.js:87457:13)
    at processRootFile (/Users/shurikag/PRIZ/dev/priz-fe/node_modules/typescript/lib/typescript.js:87287:13)
    at /Users/shurikag/PRIZ/dev/priz-fe/node_modules/typescript/lib/typescript.js:87763:21
    at Object.forEach (/Users/shurikag/PRIZ/dev/priz-fe/node_modules/typescript/lib/typescript.js:210:30)
    at processLibReferenceDirectives (/Users/shurikag/PRIZ/dev/priz-fe/node_modules/typescript/lib/typescript.js:87758:16)
    at findSourceFile (/Users/shurikag/PRIZ/dev/priz-fe/node_modules/typescript/lib/typescript.js:87598:17)
    at /Users/shurikag/PRIZ/dev/priz-fe/node_modules/typescript/lib/typescript.js:87457:85
    at getSourceFileFromReferenceWorker (/Users/shurikag/PRIZ/dev/priz-fe/node_modules/typescript/lib/typescript.js:87424:34)
    at processSourceFile (/Users/shurikag/PRIZ/dev/priz-fe/node_modules/typescript/lib/typescript.js:87457:13)
    at processRootFile (/Users/shurikag/PRIZ/dev/priz-fe/node_modules/typescript/lib/typescript.js:87287:13)
    at /Users/shurikag/PRIZ/dev/priz-fe/node_modules/typescript/lib/typescript.js:86300:60
    at Object.forEach (/Users/shurikag/PRIZ/dev/priz-fe/node_modules/typescript/lib/typescript.js:210:30)
[31mERROR in ./node_modules/@sentry/utils/esm/misc.js
Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
Error: File lib.dom.d.ts does not have a sourceFile.
    at Object.getSourceFile (/Users/shurikag/PRIZ/dev/priz-fe/node_modules/@angular-devkit/build-optimizer/src/helpers/transform-javascript.js:86:23) …

我有一个设置，可以使用至少几年，没有任何问题。在我的最新更新中，突然出现以下错误：

#!/bin/bash -eo pipefail
./grailsw compile
You must be connected to the internet the first time you use the Grails wrapper
org.xml.sax.SAXParseException; lineNumber: 6; columnNumber: 3; The element type "hr" must be terminated by the matching end-tag "</hr>".
    at com.sun.org.apache.xerces.internal.util.ErrorHandlerWrapper.createSAXParseException(ErrorHandlerWrapper.java:203)
    at com.sun.org.apache.xerces.internal.util.ErrorHandlerWrapper.fatalError(ErrorHandlerWrapper.java:177)
    at com.sun.org.apache.xerces.internal.impl.XMLErrorReporter.reportError(XMLErrorReporter.java:400)
    at com.sun.org.apache.xerces.internal.impl.XMLErrorReporter.reportError(XMLErrorReporter.java:327)
    at com.sun.org.apache.xerces.internal.impl.XMLScanner.reportFatalError(XMLScanner.java:1473)
    at com.sun.org.apache.xerces.internal.impl.XMLDocumentFragmentScannerImpl.scanEndElement(XMLDocumentFragmentScannerImpl.java:1749)
    at com.sun.org.apache.xerces.internal.impl.XMLDocumentFragmentScannerImpl$FragmentContentDriver.next(XMLDocumentFragmentScannerImpl.java:2967)
    at com.sun.org.apache.xerces.internal.impl.XMLDocumentScannerImpl.next(XMLDocumentScannerImpl.java:602)
    at com.sun.org.apache.xerces.internal.impl.XMLDocumentFragmentScannerImpl.scanDocument(XMLDocumentFragmentScannerImpl.java:505)
    at com.sun.org.apache.xerces.internal.parsers.XML11Configuration.parse(XML11Configuration.java:842)
    at com.sun.org.apache.xerces.internal.parsers.XML11Configuration.parse(XML11Configuration.java:771)
    at com.sun.org.apache.xerces.internal.parsers.XMLParser.parse(XMLParser.java:141)
    at com.sun.org.apache.xerces.internal.parsers.AbstractSAXParser.parse(AbstractSAXParser.java:1213)
    at com.sun.org.apache.xerces.internal.jaxp.SAXParserImpl$JAXPSAXParser.parse(SAXParserImpl.java:643)
    at com.sun.org.apache.xerces.internal.jaxp.SAXParserImpl.parse(SAXParserImpl.java:327)
    at javax.xml.parsers.SAXParser.parse(SAXParser.java:195)
    at grails.init.Start.getVersion(Start.java:36)
    at grails.init.Start.main(Start.java:83)

Exited with code exit status 1 …

我正在尝试在学说中使用本机查询，现在创建了一些非常简单的东西：

$rsm = new ResultSetMapping();
$rsm->addEntityResult('ObjectA', 'a');
$rsm->addFieldResult('a', 'id', 'id');
$query = $em->createNativeQuery('SELECT * FROM table a', $rsm);

我尝试使用此代码时，收到一个错误，指出 ObjectA 不是有效实体或映射的超类。这是完全正确的。我的问题是：有什么方法可以使对任何任意类（不是实体）的本机查询的疯狂结果，但仍然使用 Doctrine 的工具来做到这一点。

注意：我试图避免使用较低级别的 PDO。

谢谢你。

我正在尝试基于此示例构建基于 Redux 的通知器：https : //material-ui.com/components/snackbars/#CustomizedSnackbars.tsx

这就是我想出的：

import { Snackbar } from '@material-ui/core';
import MuiAlert, { AlertProps } from '@material-ui/lab/Alert';
import React from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { ProgramCategoryActions } from '../../program/store/program-category.actions';
import { NotificationState } from './model/notification-state';
import { NotificationSelectors } from './store/notification.selectors';

interface NotificatorProps {
  notification?: NotificationState;
  close: () => void;
}

// tslint:disable-next-line:function-name
function Alert(props: AlertProps) {
  return <MuiAlert elevation={6} variant="filled" {...props} />;
}

export const PureNotificator: …

在我的应用程序中,我使用grails-spring-security-rest插件,我目前正处于构建身份验证流程的阶段.

如果我使用休息客户端,一切都按预期工作:我可以通过在json中发布用户名和密码登录并获取令牌.完善!

现在,我正在尝试将整个内容与Web表单集成,当然,浏览器会发送预检OPTIONS请求.

我有一个简单的拦截器设置:

@GrailsCompileStatic
class CorsInterceptor {
    int order = HIGHEST_PRECEDENCE

    CorsInterceptor() {
        matchAll() // match all controllers
        //.excludes(controller:"login")   // uncomment to add exclusion
    }

    boolean before() {
        String origin = request.getHeader("Origin");

        boolean options = "OPTIONS".equals(request.getMethod());
        if (options) {
            if (origin == null) return;
            response.addHeader("Access-Control-Allow-Headers", "origin, authorization, accept, content-type, x-requested-with");
            response.addHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS");
            response.addHeader("Access-Control-Max-Age", "3600");
        }

        response.addHeader("Access-Control-Allow-Origin", origin == null ? "*" : origin);
        response.addHeader("Access-Control-Allow-Credentials", "true");

        true // proceed to controller
    } …

尝试迁移我的代码以播放2.6除了DateTime类型的格式外,一切都很好.

作为迁移的一部分,我确实添加了play-json-joda依赖项.

但是,这样的事情:

case class GeoArea(id: Option[Int] = None,
                   continentId: Option[Int] = None,
                   countryId: Option[Int] = None,
                   code: String,
                   name: String,
                   discr: Discriminator.Value,
                   createdAt: DateTime = DateTime.now,
                   updatedAt: DateTime = DateTime.now,
                   deletedAt: Option[DateTime] = None,
                   createdBy: Option[String] = None,
                   updatedBy: Option[String] = None)

格式对象定义为:

implicit lazy val geoAreaFormat: Format[GeoArea] = Json.format[GeoArea]

我收到一个错误:

没有play.api.libs.json.Format的实例可用于隐式作用域中的org.joda.time.DateTime,org.joda.time.DateTime,scala.Option [org.joda.time.DateTime](提示:如果在同一个文件中声明,请确保它在之前声明)[error]
隐式lazy val geoAreaFormat:格式[GeoArea] = Json.format [GeoArea]

我错过了什么？我还需要在范围内解决这个问题吗？

我的导入如下:

import driver.PGDriver.api._
import org.joda.time.DateTime
import play.api.libs.json._
import slick.lifted.Tag
import model.GeoAreas.Discriminator
import converters.{JsonEnumeration, SlickEnumeration}

并且它们在迁移过程中没有发生变化,但这些变化足以让一切顺利进行.