Phaser change sprite rotation to the direction its going in

I have this sprite group

this.photons = this.physics.add.group({
      key: "photon",
      repeat: 11,
      setXY: { x: 50, y: 50, stepX: 32 },
    });

    this.photons.children.iterate(function (child) {
      child.body.bounce.set(1);
      child.setVelocity(Phaser.Math.Between(300, 500),20);
      child.body.collideWorldBounds = true;
    });

Edit:
the children are colliding with each other by this.physics.add.collider(this.photons, this.photons);

Edit: Camera Code

const cursors = this.input.keyboard.createCursorKeys();

    const controlConfig = {
      camera: this.cameras.main,
      left: cursors.left,
      right: cursors.right,
      up: cursors.up,
      down: cursors.down,
      acceleration: 0.06,
      drag: 0.0005,
      maxSpeed: 1.0,
    };

    this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl(
      controlConfig
    );

How can I make every child face the direction of their vector, changing every collision?

It depends on what they should be colliding on. if only the world bound, you would have to:

1. set the property onWorldBounds on the photons

    this.photons.children.iterate(function (child) {
   ...
   child.body.onWorldBounds = true;
   });
   

2. setup a world event listener with: this.physics.world.on('worldbounds', ...), in the callback you can change the rotation of the sprite
   link to the documentation

Update:
You can use vector-calculation to calculate the rotation

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

document.body.style = 'margin:0;';
var config = {
type: Phaser.AUTO,
width: 536,
height: 183,
physics: {
default: 'arcade',
arcade: {            
gravity: { y: 0 },
}
},
scene: { create }
}; 
function create () {
this.add.text(10,10, 'DEMO TEXT')
.setScale(1.5)
.setOrigin(0)
.setStyle({fontStyle: 'bold', fontFamily: 'Arial'});
let graphics  = this.make.graphics();
graphics.fillStyle(0xffffff);
graphics.fillTriangle(0, 0, 10, 5, 0, 10);
graphics.generateTexture('img', 10, 10);
this.photons = this.physics.add.group({
key: "img",
repeat: 2,
setXY: { x: 50, y: 50, stepX: 32 },
});
this.photons.children.iterate(function (child) {
child.body.bounce.set(1);
child.setVelocity(Phaser.Math.Between(0, 100),30);
let initialAngle = (new Phaser.Math.Vector2(child.body.velocity)).angle();
child.setRotation(initialAngle);
child.body.collideWorldBounds = true;
child.body.onWorldBounds = true;
});
this.physics.world.on('worldbounds', (photon) => {
let newAngle = (new Phaser.Math.Vector2(photon.velocity)).angle();
photon.gameObject.setRotation(newAngle);
});
this.physics.add.collider(this.photons, this.photons, (p1, p2) => {
let newAngle = (new Phaser.Math.Vector2(p1.body.velocity)).angle();
p1.setRotation(newAngle);
newAngle = (new Phaser.Math.Vector2(p2.body.velocity)).angle();
p2.setRotation(newAngle);
});
}
new Phaser.Game(config);

<!-- language: lang-html -->

<script src="//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>

<!-- end snippet -->