我正在使用Angular 7并面临一个问题=>登录后,API GET调用成功,组件也接收数据,但UI没有显示该数据.

当我打开浏览器控制台时,会立即在UI上填充数据并在控制台中显示警告.

"core.js:15686在Angular区域外触发导航,您是否忘记调用'ngZone.run()'？"

我已经搜索了这个警告并找到了一些解决方法,并在其中this.ngZone.run()调用我的API.

但问题是,我使用了40多个组件,并在每个组件中调用了这么多API.所以我必须调用ngZone.run()每个API调用,这似乎很难做到.

请建议我更好的方法来克服这个问题.提前致谢.

app.component.ts

getEmployees(): void {
    this.employeeService.getEmployees().subscribe(e => {
        this.employees = e;
    });
}

app.service.ts

@Injectable()
export class EmployeeService {
    constructor(private httpClient: HttpClient) { }

    getEmployees() {
        return this.httpClient.get<EmployeeModel[]>('employees');
    }

我正在使用 Remix-run，我想从 auth 实用程序函数重定向到我的登录页面。但它不起作用。这是与我的身份验证实用程序方法类似的功能

import { redirect } from 'remix';

 async function authenticate(request){
  try{
    const user = await rpc.getUser(request);
    return user
  } catch(e){
   console.log(e) // logs error when rpc fails
   if(e.response.status === 401){
    return redirect('/login')
   }
   return redirect('/500')
  }
 }

//component.jsx

import {useLoaderData } from 'remix';

export async function loader({ request }) {
  const user = await auth.authenticate(request);
  return { user };
}

export default function Admin(){
 const { user } = useLoaderData();
  return <h1>{user.name}</h1>
}

如果 auth rpc 失败，我会在日志中收到错误消息。但重定向永远不会发生。如果我将 …

我第一次尝试 remix，我想我喜欢它的数据处理方法。但是，我面临数据从加载器包装器返回“未定义”的问题。

import { LoaderFunction } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import axios from 'axios';
const url = 'https://jsonplaceholder.typicode.com/users'

export async function Members(){
const {data} = await axios.get(url);
 return data
} //I am sure it returns the expected data when I call on this function.

export const loader: LoaderFunction = async () => {
const response = await Members()
 return response
};

export const Architects = () => {
  const members = useLoaderData()
  console.log(members)

  return (
    .... …

import { environment } from '@env/environment';

export const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'organisations',
        component: OrganisationListComponent,
        data: {
          [environment.router.data.resourceName]: 'ORGANISATION' // <- error
        }
      },
      {
        path: 'organisations/create',
        component: OrganisationCreateComponent,
        data: {
          [environment.router.data.resourceName]: 'ORGANISATION_LIST' // <- error
        },...
      }

这是我的路由模块文件之一的一部分。如您所见，我希望路由数据具有我在环境文件中定义的名称的属性。但这在使用--aot标志进行编译时将无法正常工作。这是错误：

ERROR in Error during template compile of 'AdminRoutingModule'
  Expression form not supported in 'routes'
    'routes' contains the error at app/admin/admin-routing.module.ts(30,11).

我的应用程序中大约有30条路由，并且所有路由都具有带有键“ resourceName”的data属性。而且我不想在我的应用程序中重复此字符串30次。

我不能创建具有resourceName属性的类并在数据中实例化它，因为在路由配置中也不允许使用函数表达式。

有没有解决的办法，还是使用AOT编译器根本无法实现？

编辑：这是environement.ts文件：

export const environment = {
  production: true,
  version: '1.0.0', …

我有一些 Svg 文件，我想将它们作为 React 组件加载到 remix run 应用程序中。例如在create-react-app中你可以做这样的事情

import { ReactComponent as Logo } from './logo.svg';
function App() {
  return (
    <div>
      {/* Logo is an actual React component */}
      <Logo />
    </div>
  );
}

remix-run 中是否有类似的方法可以达到相同的效果？

我正在学习 remix，我的加载器中有一些函数，我可以使用 useLoaderData 在默认路由中调用它们，如下所示：

export const loader = async () => {
  const pokemon = await getRandomPokemon();
  const types = await getAllPokemonTypes();
  return [pokemon, types.results];
};

export default function App() {
  const [pokemon, types] = useLoaderData();
...
}

我想添加一个按钮来重新加载数据（因为在这种情况下我想要一个新的随机口袋妖怪）每次点击它

我想知道是否有一种方法可以重定向路由或返回Response带有数据的 a 并使用该函数在另一个页面上获取它loader。

基本上，我试图使用表单创建一个新对象，并重定向到另一个我想要显示创建成功消息的页面。

这是一个表单页面示例：

我正在尝试在正文中发送消息Response。

import { ActionFunction, Form } from "remix";

export const action: ActionFunction = async ({ request }) => {
  // const formData = await request.formData();

  return new Response(JSON.stringify({ message: "Hello world!" }), {
    status: 303,
    headers: {
      Location: "/new-page",
    },
  });
};

export default function Index() {
  return (
    <div>
      <Form method="post">
        <input type="text" id="name" name="name" />
        <button type="submit">Submit</button>
      </Form>
    </div>
  );
}

此时NewPage我需要知道是否有办法获取重定向响应上的消息。

import { ActionFunction …

我正在尝试使用包含 css 的第 3 方 node_nodules，我尝试以各种方式将其导入混音应用程序中的 tailwinds app.css 中。Tailwind CSS 内容正在导入并且工作正常。

关于我做错了什么有什么想法吗？

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* DID NOT WORK: */
/* @import '/node_modules/swiper/swiper-bundle.css';
   @import '/node_modules/swiper/swiper-bundle.min.css';
   @import '/node_modules/swiper/swiper.min.css'; */

/* DID NOT WORK: */
/* @import 'swiper/swiper-bundle.css';
   @import 'swiper/swiper-bundle.min.css';
   @import 'swiper/swiper.min.css'; */

/* DID NOT WORK: */
/* @import '~swiper/swiper-bundle.css';
   @import '~swiper/swiper-bundle.min.css';
   @import '~swiper/swiper.min.css'; */

我的 post.config.js 如下所示：

    module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
  },
}

当我尝试在 remix 中执行 npm run build 时，它只会将输出作为导入语句的字符串：

我正在创建一个将处理 post 请求的 api 路由，主要思想是创建一个 api 端点来添加数据。问题是我无法将数据发送到端点。

// posts-creation.ts
export const action: ActionFunction = async ({ request }) => {
  switch (request.method) {
      case 'POST': {
        return json(request.body);
      }
  }
}

但是当我使用邮递员使用 JSON 正文执行发布请求时显示了这一点

{
"_readableState": {
    "objectMode": false,
    "highWaterMark": 16384,
    "buffer": {
        "head": null,
        "tail": null,
        "length": 0
    },
    "length": 0,
    "pipes": [],
    "flowing": null,
    "ended": false,
    "endEmitted": false,
    "reading": false,
    "sync": false,
    "needReadable": false,
    "emittedReadable": false,
    "readableListening": false,
    "resumeScheduled": false,
    "errorEmitted": false,
    "emitClose": true,
    "autoDestroy": true,
    "destroyed": false, …

我正在构建一个 Remix 应用程序，并希望根据用户正在查看的页面在我的数据库中记录一些用户分析。我还想逐个路由地执行此操作，而不仅仅是简单地使用原始 URL。

例如：我想知道“用户查看的 URL /emails/123”以及“用户查看的路由 /emails/$emailId”

这个问题可以概括为“我想为每个用户导航运行一段服务器代码”

对于我的跟踪，我假设用户在其浏览器中启用了 JavaScript。

我尝试过的解决方案：

在加载器中记录

这会是这样的：

export const loader: LoaderFunction = async ({ request, params }): Promise<LoaderData> => {
  myDb.recordPageVisit(request.url);
}

这不起作用，因为每次页面访问都可以多次调用加载程序（例如，在运行操作后）

请求参数中可能隐藏了一些值，告诉我们这是初始页面加载还是稍后访问，但如果是这样，我找不到它，包括当我检查原始 HTTP 请求时。

必须将此代码放入每个加载器中也很烦人。

在节点代码中记录URL

我使用 @remix-run/node 作为我的基础混音服务器，所以我有设置节点中间件的逃生舱口，我认为这可能是一个很好的答案：

  const app = express();
  app.use((req, res, next) => {
    if (req.url.indexOf("_data") == -1) {
      myDb.recordPageVisit(req.url);
    }
    next();
  });

我尝试忽略_data其中的路由，但这不起作用，因为重新混合非常高效，并且当用户导航时，它使用 ajax-y 调用仅获取 loaderData 而不是从服务器获取完整渲染的页面。我知道这是 Remix 的行为，但在我走这条路之前我不记得它:facepalm:

据我所知，无状态地跟踪唯一的页面浏览量（即纯粹基于当前的 URL）是不可能的 - 您还需要查看用户的上一页。

我想知道引用者是否允许它无状态地工作，但引用者似乎没有按照我希望的方式运行：在第一个加载器请求页面数据时，引用者标头已经设置为当前页面。因此，基于引用者，初始加载和突变后加载看起来是相同的。我不知道这在技术上是否是一个错误，但这肯定不是我期望的行为。

我需要从一个非常慢且很少变化的 API 获取数据，所以我想我应该使用内存缓存。我首先尝试了一种非常简单的方法，只需将其保存到路径中加载器函数范围之外的变量中：

let cache;

export const loader = async () => {
  if (!cache) {
    // we always end up here
    cache = await (await fetch("...)).json()
  }
}

但这没有用。然后我尝试了一个适当的缓存库（lru-cache），但该缓存也始终是空的。然后我意识到整个文件在每个请求上都会重新加载，我猜这是开发模式的事情，所以我尝试将缓存的创建移动到一个单独的文件cache.server.ts并从那里导入它。

import LRU from "lru-cache";
console.log("Creating cache"); // this is logged on each request
const cache = new LRU({ max: 200 });
export default cache;

但该文件似乎也会根据每个请求重新加载。

如果我构建一个生产版本并运行一切都很好，但如果有某种方法让它在开发模式下工作也很好。

有人可以分享如何配置现代HttpClient 4.5.3重试失败的请求并等待一段时间再重试之前？

到目前为止,我看起来正确,.setRetryHandler(new DefaultHttpRequestRetryHandler(X, false))它将允许重试X次请求.

但我无法理解如何配置退避:.setConnectionBackoffStrategy()/ .setBackoffManager()根据JavaDocs调节其他内容,而不是重试之间的超时.

我有一个json对象,我序列化和发布.我发现如果我的json对象的一个​​字符串成员有一些unicode字符,例如é,ó,6̄(我有一些其他unicode字符,不会返回HTTP 400错误)请求返回HTTP 400错误的请求.

以下是调用方式的简化代码:

WebClient client;
Foo myObject = new Foo();
myObject.StringField1 = "é";
string serializedObjects = Newtonsoft.Json.JsonConvert.SerializeObject(myObject)
client.Headers[HttpRequestHeader.ContentType] = "application/json;charset=utf-8"; 
var response = client.UploadString(url, serializedObjects);

以下是服务器端如何接收呼叫的代码:

public async Task<IHttpActionResult> Post([FromBody] IList<Foo> myObjects){}

以下是我研究/尝试过的一些事情以及我所做的一些假设:

1)将字符串对象作为UTF8字节获取,然后将其转换回字符串

Encoding.UTF8.GetString(Encoding.UTF8.GetBytes(serializedObjects))

2)当我发出请求并使用Fiddler捕获流量并检查Raw中的请求时.对于不返回400错误的unicode字符,它们将替换为"？" 但是对于导致400的那些,它们显示为空白.但是,当我查看JSON视图时,它显示为空字符' '

3)返回HTTP 400是ASP Web API无法正确反序列化对象,所以我尝试使用Newtonsoft库来序列化和反序列化对象,这很好用.(ASP Web API的默认序列化程序是JSON.NET,因此它应该执行相同的序列化http://www.asp.net/web-api/overview/formats-and-model-binding/json-and-xml-序列化)

string b = JsonConvert.SerializeObject(a);
Foo c = (Foo) JsonConvert.DeserializeObject(b, typeof(Foo));
// And I tried deserializing using the generic method
Foo d = JsonConvert.DeserializeObject<Foo>(b);

4)我确信这是我的服务器拒绝这些特殊字符的问题,但是当我使用Fiddler重试请求(将Fé插回到Fiddler在原始请求中将其删除的地方)时,调用成功.5)我在http://www.iana.org/assignments/media-types/media-types.xhtml上验证了我的内容类型,并明确指定了utf8字符集.

所以在我看来这是一个编码问题,但é应该是一个有效的UTF-8字符.我在他的页面上的Jon Skeet的Unicode Explorer小部件中验证了它.所以我不知道为什么这会导致问题......