小编Jak*_*ers的帖子

我有一个为 Angular 前端提供服务的 NodeJS 应用程序，这个应用程序是使用 AWS Elastic Beanstalk 部署的。如果我直接将 .zip 文件上传到 Elastic Beanstalk，它将包含：

\dist
request-map.js
credentials.json
server.js

这已经过测试并且效果很好。但现在我想要一个 CD 管道

当您构建 Angular 应用程序 ( ng build) 时，它会将所有工件编译到\dist项目根目录下的文件夹中。我已经成功创建了一个持续交付管道，但要使其正常工作，我必须将该\dist文件夹提交到我的代码存储库。这显然不理想。

为了改进我的架构，我知道我必须创建一个构建阶段。我已经成功添加了构建阶段，并且它在我的buildspec.yml文件中运行良好，但是当我导航到我的域时出现错误：

Error: ENOENT: no such file or directory, stat '/var/app/current/dist/my-angular-app/index.html'

这是我的 buildspec.yml 文件

# Do not change version. This is the version of aws buildspec, not the version of your buldspec file.
version: 0.2
phases:
  pre_build:
    commands:
      - echo Installing source NPM dependencies...
      - npm install …

我正在用 ReactJS 构建一个网站。该网站的第一个屏幕包含三个视频。我想知道如何设置一个事件，当所有三个视频都触发时加载后触发的事件。

我的目标是显示加载动画，直到所有视频都成功加载（这样用户就不会坐在那里盯着等待填充的视频容器）。理想情况下，当加载动画完成时，视频将完全加载并准备好播放，而不会中断 UI。

对于这个用例使用生命周期钩子似乎不起作用，因为这些钩子将等到 DOM 呈现，而不是等到多媒体加载。

  // Does not work
  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    setIsLoading(false)
  });

我见过类似的问题提到使用该<video> onLoad事件：

<video ref={video1}
    autoPlay
    playsInline
    muted
    className="video"
    loop
    src={bike}
    onLoad={()=>{console.log("I don't get called???")}}
/>

但由于某种原因，这个函数从未被调用。

这似乎是一个相对常见的用例，因此我非常感谢有关正确解决方案的建议。

额外信息：

• 这些视频将在本地可用（不是从外部端点获取）
• 我更喜欢坚持使用功能组件

我正在尝试使用 React.js 中的 ref 来控制视频的播放/暂停状态，我的代码可以工作，但是我正在尝试解决 tslint 错误：

function App() {
    const playVideo = (event:any) => {
        video.current.play()
    }
    const video = useRef(null)

    return (
        <div className="App">
            <video ref={video1} loop src={bike}/>
        </div>
    );
}

这会导致

TS2531: Object is possibly 'null'.

所以，我试图改变const video = useRef(null) 到const video = useRef(new HTMLVideoElement())

我得到： TypeError: Illegal constructor

我也试过：const video = useRef(HTMLVideoElement) 结果是：

TS2339: Property 'play' does not exist on type '{ new (): HTMLVideoElement; prototype: HTMLVideoElement; }'

我有一个服务：

@Injectable({ providedIn: 'root' })
export class AuthenticationService {
  signInChange: Subject<boolean> = new Subject<boolean>();
  isSignedIn: boolean;

  constructor() {
    this.isSignedIn = false;
  }

  signInChange: Subject<boolean> = new Subject<boolean>();
  isSignedIn: boolean;

  login() {
    this.auth2.signIn()
      .then(user => {
        this.isSignedIn = true;
        this.signInChange.next(this.isSignedIn)
      })
      .catch(error => {
        console.log("Error signing in")
      })
  }

  logout() {
    this.auth2.signOut()
      .then(user => {
        this.isSignedIn = false;
        this.signInChange.next(this.isSignedIn)
      })
      .catch(error => {
        console.log("Error signing out")
      })
  }

和一个组件：

export class HomeComponent implements OnInit {
  signInSubscription: Subscription;
  isSignedIn: any;

  constructor(private authService: …

假设我有一个组件：

export const MyComponent = ({largeArray}) => {
    const arrayINeed = largeArray.sort()
}

据我了解，每次重新渲染largeArray.sort()时都会被调用，如果很大，这不会引起一定程度的性能问题吗？MyComponentlargeArray

在这种情况下，像这样记住结果是否更好？：

export const MyComponent = ({largeArray}) => {
    const sortedArray = useMemo(() => largeArray.sort(), [largeArray])
}