小编one*_*dkr的帖子

我的反应项目中的图像存在问题.事实上,我一直认为src属性的相对路径是建立在文件架构上的

这是我的文件架构:

components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
... 

但是我意识到路径是建立在URL上的.在我的一个组件中(例如到file1.jsx)我有这个:

localhost/details/2
<img src="../img/myImage.png" /> -> works

localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't work, images are not displayed

怎么可能解决这个问题？我希望在react-router处理的任何形式的路由中,所有图像都可以用相同的路径显示.

我尝试将一个函数传递给我的子组件.对于每个子组件,当用户单击它们时,将调用onclick函数.此onclick函数将写入父组件.

父组件:

class AgentsList extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClick(e) {
    e.preventDefault();
    console.log(this.props);
  }

  render() {
    const { agents } = this.props;

    ...

    var agentsNodes = agents.map(function(agent, i) {
      if(agent.id_intervention == "") {
        return (
          <Agent agent={agent} key={i} ticket={t} id={row_names} onClick={this.handleClick.bind(this)} />
        );
      }
    });
    return (
      <div id="agents">
        <div className="agents-title">
          <h3>Title</h3>
        </div>
        {agentsNodes}
      </div>
    );
  }
}

子组件:

class Agent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { agent, t } = this.props;

    return …

在我的Angular App中，我有一个父组件：

console.component.html

<div class="main">
  <ibe-snackbar></ibe-snackbar>
  <router-outlet></router-outlet>
</div>

routler-outlet可以加载两个子组件。一个被热切加载，另一个被延迟加载。这是路线文件

console.component.routes

const ConsoleRoutes: Routes = [
  { path: 'console', component: ConsoleComponent, data: {context : CONSOLE_CONTEXT},
    children: [
      { path: "projects", component: ProjectsListComponent, data : {context : PROJECT_CONTEXT}}, --> Loaded eagerly
      { path: "projects/:projectId/users", loadChildren: "./users/users.module#UsersModule" }, ---> Loaded laziness
      { path: '', redirectTo: "projects", pathMatch: "full" },
    ]
  }
];

export const ConsoleRouting: ModuleWithProviders = RouterModule.forChild(ConsoleRoutes);

快餐栏组件将初始化一个可观察对象，该对象将在调用时在组件上显示一条消息。

Snackbar.service.ts

export class SnackbarService {
  private subject = new Subject<any>();
  constructor() { }

  showSnackbar(message, …

我尝试将表单从我的子组件传递给他的父组件。

儿童 TS：

@Output() submit: EventEmitter<FormGroup> = new EventEmitter();

updateStream(): void {
    const body = {some data};

    // If I put this.submit.emit(this.form) here it works

    this.apiGatewayService.verifyKeys(body).subscribe(
       (res) => {
        console.log('SUCCESS verify : ', res);
        this.submit.emit(this.form); // doesn't work
      },
      (error) => {
        console.log('ERROR verify : ', error);
        this.disableLoader.emit(); // doesn't work
      });
}

html：

<child (submit)="updateStream($event)"></child>

家长 TS :

 updateStream(form: formGroup): void {
    console.log('UPDATE');
  }

我发出的所有订阅都不起作用（未显示父组合中的 console.log）。但是在订阅之外它可以工作。

你有什么想法吗？

编辑

问题出在 this.apiGatewayService.verifyKeys(body) 行上。此调用完美运行（正确响应），但是发射不起作用。但是，如果我像这样模拟这个调用，它会起作用：

updateStreamOut(): void {
    this.test().subscribe(
      (res) => {
        console.log('SUCCESS …

我有一个 Angular 应用程序，即使使用产品模式构建，也有多个大文件（超过 1MB）。

我想使用 CloudFront 上提供的 gzip 压缩功能来压缩它们。

我在 CloudFront 控制台中激活了“自动压缩对象”选项。我的发行版的起源是 s3 存储桶。

但是，当我通过浏览器加载页面时下载的捆绑包未使用 gzip 压缩

这是请求/响应的示例

请求标头：

:authority:dev.test.com
:method:GET
:path:/vendor.cc93ad5b987bea0611e1.bundle.js
:scheme:https
accept:*/*
accept-encoding:gzip, deflate, br
accept-language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4
cache-control:no-cache
pragma:no-cache
referer:https://dev.test.com/console/projects
user-agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

响应头

accept-ranges:bytes
age:17979
content-length:5233622
content-type:text/javascript
date:Tue, 07 Nov 2017 08:42:08 GMT
etag:"6dfe6e16901c5ee5c387407203829bec"
last-modified:Thu, 26 Oct 2017 09:57:15 GMT
server:AmazonS3
status:200
via:1.1 9b307acf1eed524f97301fa1d3a44753.cloudfront.net (CloudFront)
x-amz-cf-id:9RpiXSuSGszUaX7hBA4ZaEO949g76UDoCaxzwFtiWo7C-wla-PyBsA==
x-cache:Hit from cloudfront

根据AWS文档，一切正常：

• 接受编码：gzip
• 内容长度呈现
• 文件大小在 1,000 到 10,000,000 字节之间
• ...

您知道为什么 …

我试图真正了解路由如何在我的 React 应用程序上与 react-router 一起工作，并在我的 node.js 服务器上表达。

反应路由器代码：

import ..
import { Router, Route, IndexRoute, hashHistory, IndexRedirect, Redirect } from "react-router";

render(
  <Router history={hashHistory}>
    <Redirect from="/" to="/index"/>
    <Route path="/" component={App}>
        <IndexRoute component={NavBarTop} />
        <IndexRoute component={NavFilter} />
        <Route path="/index" component={Tickets} />
        <Route path="/ticket/:id" component={TicketInformations} />
        <IndexRoute component={InterventionsList} />
    </Route>
  </Router>,
document.getElementById('container'));

我的服务器路由：

app.use('/', express.static(path.join(__dirname, '../client/')), function(res, eq) {
});

app.get('/test', function (req, res) {
  console.log("test");
  var data = getTickets(); // return a JSON
  res.end( data );
});

我的反应路由工作得很好，但是我想进行 AJAX 调用来填充我的组件。为此，我尝试从我的节点服务器获取 JSON。但是，路径“测试”不起作用。我的 …

我有一个 python 脚本，每次恢复新值时都会向我的 node.js 服务器发送数据。

这是我的代码客户端（python 脚本）：

from socketIO_client import SocketIO

...

def update_db(dateUpdate, res, nameIndex):
    try:
        with SocketIO('192.168.100.103', 8080) as socketIO:
             socketIO.emit('newValues', res)

    except Exception as e:
        print "error socketIO - Impossible to emit data \n"

    #Update database

while True:
    #If new value
        dateUpdate = time.strftime('%Y-%m-%d %H:%M:%S')
        update_db(dateUpdate, res, nameIndex[i])
        break

这是我的 node.js 服务器：

var path = require('path');
var fs = require('fs');
var mysql = require("mysql");
var express = require('express');

var app = express();

var server = app.listen(8080);
console.log('Server …